CSS填充水平空间

Question

我看过很多关于如何让 div 填满所有可用空间的问题，但还是没弄明白。

例子

<div>
    <div id="div1">    
        <div id="div2"></div>
        <div id="div3">
            Some text
        </div>
    </div>
</div>​

和 CSS

div { height:100px; }
#div1 { width: 100%; }
#div2 { background-color:blue; float:left; width:30%; }
#div3 { background-color:green; float:left; }

我想要绿色的 #div3 block 来填充所有水平空间，但是上面的 CSS 不起作用 - jsFiddle .

如您所见，我没有手动设置 width。即使我写 width: auto; 也行不通。

Answer 1

两种解决方案。

方案一

将具体的 width(不是 auto)设置为绿色元素，因为它是 float 的。

解决方案2

不要 float 你的绿色元素。根据您是否希望绿色元素包裹在蓝色元素下方(当更高时)适本地设置左边距。

margin-left: 30%; /* should always be right of the blue */

您可以根据需要设置其他边距。

绿色 div

的边距

我不知道当绿色 div 的高度高于蓝色时，您是否允许它在蓝色 div 下展开。但是假设您想将其保留在蓝色 div 中。

不 float 绿色应该使这最简单，因为您可以根据自己的喜好操纵绿色的尺寸。 Here is an example显示高于蓝色的绿色 div，不换行在蓝色之下，并具有以像素为单位的固定右边距设置。 有效。

您还可以在绿色元素上添加额外的填充或边框，它仍然有效。

JSFiddle 中的示例

这个例子向左浮动 div 并保持右边的绿色 div 总是在它的右边，同时也在它们之间添加一些空间。它使用按照以下 Can I use 支持的 CSS3 calc() 函数数据。

如您所见，我还大大简化了您的 HTML:

<div class="left">Nav</div>
<div class="right">Content</div>​

CSS 包含用于 calc 用法的其他特定于浏览器的设置，但将来它们将过时，浏览器将仅使用 margin-left 的最后设置。

.left {
    background-color: #69c;
    height: 100px;
    float: left;
    width: 30%;
}
.right {
    background-color: #9c9;
    height: 150px;
    margin-left: -webkit-calc(30% + 10px);
    margin-left: -moz-calc(30% + 10px);
    margin-left: calc(30% + 10px);
}