Question

要求是红色区域应自动扩展剩余宽度。问题是蓝色区域没有显示在顶部对齐。

有没有办法在没有table和javascript的情况下实现这一目标？

注意：与Expand div to max width when float:left is set中的问题非常相似，但不一样。在这个问题中有2个浮动的div。

Answer 1

如果您将right div放在middle之前怎么办？

<div class="content">
  <div class="left">
    <p>Hi, Flo!</p>
 </div>
 <div class="right">foo</div>
 <div class="middle">  
    <p>is</p>
    <p>this</p>
    <p>what</p>
    <p>you are looking for?</p>
  </div>
 </div>

查看更新后的jsFiddle

解释：

使用float属性就像使用position:absolute属性一样。它从DOM流中获取元素。这意味着他们不占用任何空间。

这就是为什么在使用margin-left div时必须在页面内容上设置float:left属性的原因。如果没有，内容将在左边的div下面。

在对话框中，您的middle div位于DOM流中。所以它需要所有的空间（因为他的宽度和他的边缘属性）。因此，当您想要添加float:right div时，下一个可用空间位于middle div之下，而不是在同一行上。

这就是为什么当您使用float属性时，必须在“未浮动”内容之前设置它们。

Answer 2

你去吧

<强> HTML

<div class="green">some content</div>
<div class="blue">some content</div>
<div class="red">some content</div>

<强> CSS

.green {
    float: right;
    width: 300px; /*if you need set the width*/
    margin: 0 0 0 10px;/*if you need set the margin*/
}
.blue {
    float: left;
    width: 300px; /*if you need set the width*/
    margin: 0 10px 0 0;/*if you need set the margin*/
}
.red {overflow: hidden;}

将2 div除以float：left和float：right时，将中间div扩展为剩余宽度

2 个答案: