Блог

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

Например:

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

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

дополнительная информация:

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

ЗАПУСКАЙТЕ СВОИ ДВИГАТЕЛИ! (далее следует рисунок следов шин) ОСТОРОЖНО НА ПОВОРОТЕ! (далее следует рисунок следов шин)

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

Вы можете плавать #item1 и не плавать #item2 вот так:

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

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

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

Если вы можете быть уверены, что один столбец всегда будет иметь большую высоту, вы можете оставить этот столбец без движения и полностью расположить второй столбец. Второй столбец будет содержать контейнер (который потребуется 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 /

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