В CSS, как я могу автоматически заполнить контейнер, когда ширина другого элемента неизвестна?

Question

У меня есть два элемента внутри содержащего элемента. Контейнер имеет ширину 960 пикселей с 10 отступами на каждой стороне. У меня есть два плавающих элемента, которые находятся рядом друг с другом. Первый элемент будет содержать текст неизвестного количества, а другой элемент необходимо будет отрегулировать, чтобы заполнить оставшуюся часть ширины контейнеров.

Например:

<div id="container">
     <div id="item1">Unknown size</div><div id="item2">fill in width of left over</div>
</div>

редактировать ---->

больше информации:

мой первый элемент будет содержать неизвестное количество текста. Второй элемент не будет содержать ничего, а будет содержать фон и будет восприниматься как акцент на тексте. Думайте об этом так:

НАЧНИТЕ СВОИ ДВИГАТЕЛИ! (сопровождается рисунком следов шин) ВНИМАНИЕ НА ПОВОРОТ! (сопровождается рисунком следов шин)

Эти два элемента имеют разную длину для текста, поэтому маркировка шин тоже будет разной. но мне нужно, чтобы все было на одной линии.

Answer 1

Если вы можете быть уверены, что один столбец всегда будет иметь большую высоту, вы можете оставить этот столбец без смещения и абсолютно расположить второй столбец.Второй столбец будет содержать контейнер (для этого потребуется position: relative) сверху и снизу.

.container {
  position: relative;
  padding: 0 10px;
}

.left {
  width: 200px;
}
.right {
  position: absolute;
  width: 100px;
  right: 10px;
  top: 0px;
  bottom: 0px;
}

Здесь можно поиграть: http://jsfiddle.net/neilheinrich/5mRDM/

Answer 2

Вы можете использовать flexbox. Крис очень хорошо объяснил здесь

Answer 3

Вы можете плавать #item1, а не плавать #item2 следующим образом:

http://jsfiddle.net/CevQH/1/

из-за плавания # item1 будет поверх # item2, он удалениз обычного документооборота.Как вы можете видеть в jsfiddle, текст в item2 течет рядом с item1, в то время как фон занимает всю ширину.

Если вы размещаете предметы под ним, вы должны добавить clear:left к первому предмету после #item2