Разместите два DIV по ширине в пикселях и процентах

Question

Как float два DIV с рядом, так как ширина одного определяется в пикселях, а другой должен заполнять доступную ширину в родительском DIV? Дело в том, что содержимое второго DIV может быть пустым; таким образом, я не могу оставить его ширину пустой.

.div1 {
float:left;
display:block;
width:200px
}

.div2 {
float:left;
display:block;
width: [... 100% - 200px ...]
} 

Answer 1

Простой - плавать первый div и давать только поле, равное ширине первого div, второму div (div является блочным элементом, поэтому он уже имеет ширину 100% - просто для проверки вы можете добавить width:auto) :

.div1 {
  float: left;
  width: 200px;
  height: 100px;
  background: violet;
}

.div2 {
  width: auto;
  margin-left: 200px;    
  height: 100px;
  background: yellow;    
}

Здесь есть скрипка: http://jsfiddle.net/gFyY3/

Answer 2

Если вам не нужно использовать float, вы также можете использовать тип отображения inline-block. Спасает вас от очистки поплавков и т. Д.

<div style="width: 250px; display: inline-block; vertical-align: top;">
Some content <br> More <br> More
</div>

<div style="display: inline-block;">
Some more content  <br> More <br> More   <br> More <br> More   <br> More <br> More 
</div>

Здесь есть скрипка: http://jsfiddle.net/Neograph734/tbqpy/

Answer 3

Если вы уверены, что ваш второй div всегда будет пустым, я предлагаю вам использовать свойство Clear , как в этом примере:

div{
  float: left;
  width: 200px;
}
div.clear{
  clear: both;
}

Тогда вам не понадобится второй div.

Но если вы хотите заполнить второй содержимым, я бы посоветовал вам установить оба div с процентным значением, например:

div.first{
  float: left;
  max-width: 20%;
}
div.second{
  float: left;
  max-width: 80%;
}

Надеюсь, эта помощь.

Aymeric.

Answer 4

Вы можете установить div1 в положение absolute, чтобы он располагался над div2, тогда вы дадите div2 ширину 100% и все дочерние элементы div2 с полем в 200px.