0

我已经看到很多关于如何使 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;了也没用。

4

3 回答 3

1

两种解决方案。

解决方案 1

将混凝土width（不是auto）设置为绿色元素，因为它是浮动的。

解决方案 2

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

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

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

绿色边距div

我不知道div当它的高度高于蓝色时，你是否允许你的绿色在蓝色下膨胀。但是假设你想保持它正确的蓝色div。

不浮动绿色应该使这最简单，因为您可以根据自己的喜好操纵绿色的尺寸。这是一个示例，显示div高于蓝色的绿色，不会在蓝色下环绕，并且具有以像素为单位设置的固定右边距。作品。

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

JSFiddle中的示例

此示例向左浮动div并始终在其右侧保持绿色div，同时在它们之间添加一些空间。它使用以下支持的 CSS3calc()功能我可以使用数据吗？

如您所见，我还大大简化了您的 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);
}
于 2012-11-23T14:17:15.043 回答
0

您需要为父 div设置BG 颜色

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

如果您想使用 div3 则为该div指定宽度

#div3 { background-color:green; float:left; width: 70%; }
于 2012-11-23T14:13:54.773 回答
0

如果你想要我认为你想要的... 将宽度：100% 设置为 div，将宽度：70% 设置为 div3。

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

于 2012-11-23T14:16:12.363 回答