Как создать автоматически расширяющийся блок

Question

Мне нужно создать однострочный макет с тремя столбцами. Каждый левый и правый столбцы должны отображать одно слово без усечения (они должны расширяться и сжиматься, чтобы соответствовать слову). Центральный столбец должен отображать потенциально длинную строку, усеченную для размещения между двумя столбцами.

Вот немного HTML, чтобы передать идею:

<div class="container">
  <div class="left">Left</div>
  <div class="center">Center center center center center center center</div>
  <div class="right">Right</div>
</div>

И некоторые соответствующие CSS:

.container {
  whitespace: nowrap;
}

.left {
  display: inline-block;
}

.center {
  display: inline-block;
  overflow: hidden;
}

.right {
  display: inline-block;
}

Следующий шаг - настроить центральный элемент на автоматическое расширение или сжатие, чтобы заполнить пространство между левым и правым элементами.

Что-то вроде center.width = container.width - left.width - right.width

Есть идеи? Спасибо

---

РЕДАКТИРОВАТЬ: Решено с небольшими изменениями в ответ ianhirschfeld .

HTML:

<div class="container">
  <div class="left">Left</div>  
  <div class="right">RightRightRight</div>  
  <div class="center">Center center center center center center center</div>
</div> 

CSS:

.container {
  white-space: nowrap;
  overflow: hidden;
}

.left {
  float: left;
}

.center {
  overflow: hidden;
}

.right {
  float: right;
}

Answer 1

В зависимости от того, как именно вы это реализуете, вот что вы можете попробовать:

• Установить высоту класса контейнера
• Установить поплавок: слева на .left и поплавок: справа на .right
• Поместите свои .left и .right div в ваш центр div до его содержимого

.container {
высота: 30px;
переполнение: скрыто;
}
.left {
дисплей: встроенный блок;
фон: # b9ff67;
float: left;
}
.center {
ширина: 100%;
дисплей: встроенный блок;
оверфоу: скрыто;
фон: # 9ac0ff;
}
.right {
дисплей: встроенный блок;
фон: # ffc8c8;
float: right;
}

<div class="container">  
<div class="center">  
    <div class="left">Left</div>  
    <div class="right">RightRightRight</div>  
    Center center center center center center center  
</div>  

Answer 2

Если я правильно понимаю, то, что вы ищете, это строка:

.center { overflow: hidden; }

Этот HTML-код подходит:

<div class="container">
  <div class="left">Left</div>  
  <div class="right">RightRightRight</div>  
  <div class="center">Center center center center center center center</div>
</div> 

с переполнением: альтернативный текст http://img638.imageshack.us/img638/755/withoverflow.png

без переполнения: альтернативный текст http://img638.imageshack.us/img638/2276/withoutoverflow.png

Правильно изменяется с контейнером и окном.

Answer 3

Одна строка, три столбца, с регулировкой ширины .........

Почему бы не создать таблицу с тремя ячейками вместо плавающих элементов div, а затем указать процентную ширину ячеек?

Вы должны быть в состоянии приблизиться к содержанию, подходящему для боковых столбцов, если вы поиграете с процентами .... например, 1% | 98% | 1% и уже оттуда.

Answer 4

Попробуйте выполнить поиск по макету «Святой Грааль». Это своего рода классическая проблема CSS. Вы должны иметь возможность изменять существующие решения для усечения текста, используя свойство переполнения. Вот одна из таких ссылок:

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm