Flexbox解决方案

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>

Image

这三个项目 - 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

Demo

添加

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

float: none移除浮动的位置（您还可以避免将float: left应用于.fill），overflow: hidden（或任何不同于visible的内容）可防止浮动重叠.fill的元素。

其他方式：

您可以使用display: table-cell和display: table，但无法指定哪个元素应该增长以填充所有剩余空间。
但如果您想要完全控制并希望以更复杂的方式分配剩余空格，则应使用Flexboxes。

Answer 2

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

您可以设置前2个子节点的宽度，并在不指定宽度的情况下保留最后一个子节点，以便填充父容器。

See this demo

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解决方案

注意：如果supported browsers需要，请添加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>

Div填充剩余的水平空间

4 个答案:

Flexbox解决方案