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％的宽度 - 只是为了验证你可以添加{{1} }）：

width:auto

这里有一个小提琴：http://jsfiddle.net/gFyY3/

Answer 2

如果您不必使用float，您也可以使用inline-block display-type。使您免于清除浮动等。

<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

你可以将div1设置为绝对位置，将它放在div2上，然后你给div2宽度为100％，div2的所有子元素都是200px左边的边距。

Answer 4

如果你确定你的第二个div总是空白，我建议你像这个例子一样使用Clear property：

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%;
}

希望得到这个帮助。

艾默里克。

以px和百分比的宽度浮动两个DIV

4 个答案: