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块来填充所有水平空间，但是上层CSS不起作用 - jsFiddle。

我没有像您看到的那样手动设置width。即使我写width: auto;它也行不通。

Answer 1

两种解决方案。

解决方案1 ​​

将具体width（不是auto）设置为绿色元素，因为它已浮动。

解决方案2

不要漂浮您的绿色元素。根据您是否希望绿色元素包裹在蓝色元素下方（当更高时）适当地设置左边距。

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

您可以随意设置其他边距。

绿色div

上的边距

我不知道当绿色高度高于蓝色时，是否允许绿色在蓝色div下展开。但是假设你想把它保持在蓝色div。

不漂浮绿色应该使这最简单，因为你可以根据自己的喜好操纵绿色的尺寸。 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);
}

Answer 2

父div需要setup BG颜色

  #div1 { width: 100%;background-color:green; }

如果您想使用div3，请为div

指定宽度

#div3 { background-color:green; float:left; width: 70%; }

Answer 3

如果你想要我想要的东西......设置宽度：100％到div和宽度：70％到div3。

如果不是你想要的更具体一点