Div填充剩余的水平空间

Question

我有以下代码：

<div class="parent">
    <ul class="menu">
        <li>this</li>
        <li>width</li>
        <li>is</li>
        <li>dynamic.</li>
    </ul>

    <div class="something">
        <span>so is this</span>
        <table>because of this table.</table>
    </div>

    <div class="fill">
        <span>and so is this. but this guy needs to fill the remaining width.</span>
    </div>
</div>

图片

这3个项目 - ul和2 divs - 并排排列，如您所见，它们具有动态宽度。 我必须使这三个项目适合div.parent，宽度固定在1200px。

目前，我正在使用'float：left;' 将这3个项并排排列，我可以使用'display：inline-block;' 如果有必要[完美地工作]。 但我试图用'display：table;'来尝试一些技巧。 对于父级和'display：table-cell;' 对于这3个项目，没有成功。

我需要填充黑色div上的剩余空间，即'div.fill'。 有任何想法吗？

EDIT2： http ： //jsfiddle.net/cAs9t/

Answer 1

演示

只需添加

div.fill { float: none; overflow: hidden; }

其中float: none删除浮动（你也可以避免应用float: left to .fill ）， overflow: hidden （或任何不同于visible ）阻止浮动元素重叠.fill 。

其他方法：

• 您可以使用display: table-cell和display: table ，但是您无法指定应该增长哪个元素来填充所有剩余空间。

• 但是，如果您想要完全控制并希望以更复杂的方式分配剩余空间，则应使用Flexbox 。

Answer 2

我将父display:table和3个子项作为display:table-cell 。 现在所有3个孩子都填充了父级的宽度，你不需要浮动它们中的任何一个。 此方法的一个优点是，您可以利用vertical-align并在父级比内容短时避免包装块。 在某种程度上，你获得了table所有优点。

您可以设置前两个子节点的宽度，并保留最后一个子节点而不指定宽度，以便它将填充父容器。

看这个演示 。

Answer 3

对容器使用display：table，并为其直接子节点显示：table-row。

设置高度：0表示具有可变高度和高度的div：自动表示应填充剩余空间的div。

如果容器需要固定高度，无论是以像素还是％，您可以使用{overflow-y：auto;添加一个div。 高度：100％}到水平填充物并在其中添加内容。

<div style="height:300px; border:1px solid red;padding:2px;">
  <div style="display:table; height:100%; width:100%;border: 1px solid blue;">
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
        I take as much space as needed
    </div>
    <div style="display: table-row; height:auto; padding:2px; background-color:green;">
      <div style="height:100%; overflow: auto;">
        <div style="height: 500px">My parent will fill the remaining space</div>
      </div>
    </div>
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      <p>I take as much space as needed as well</p>
    </div>
  </div>
</div>

Answer 4

Flexbox解决方案

注意：如果您的支持的浏览器需要，请添加flex供应商前缀。

 .parent { width: 1200px; display: flex; } .menu { margin: 0; } .menu li { display: inline-block; } .fill { flex-grow: 1; } 

 <div class="parent"> <ul class="menu" style="background: #6cf"> <li>this</li> <li>width</li> <li>is</li> <li>dynamic.</li> </ul> <div class="something" style="background: #fd6"> <span>so is this</span> <table>because of this table.</table> </div> <div class="fill" style="background: #5c5"> <span>and so is this. but this guy needs to fill the remaining width.</span> </div> </div>