CSS Div 100% 与浮动：左答案

【问题标题】：CSS Div 100% with float:leftCSS Div 100% 与浮动：左
【发布时间】：2011-05-11 21:04:17
【问题描述】：

Agrh，CSS - 我生命中的祸根。有人可以帮忙吗？

我正在尝试获取以下 div 布局：

*******************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*******************************************************************************

目前我的样式是这样的：

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
}

#b {
float:left;
width:50px;
height:50px;
}

#c {
float:left;
width:100%;
height:50px;
}

<div id="container">
   <div id="a" />
   <div id="b" />
   <div id="c" />
</div>

但这会导致以下情况发生（div c 低于其他）：

********************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
********************************************************************************

需要改变什么来解决这个问题？谢谢。

其他信息：

a 和 b 必须具有固定的像素宽度。
这是一个简化的示例 - 实际上 div 具有不能重叠的边框。

【问题讨论】：

Expand div to max width when float:left is set的可能重复

标签： html css

【解决方案1】：

首先最好有一个固定宽度的容器。接下来是“c”的 100% with 是相对于容器的，所以它将跨越整个容器宽度。

更新： 更准确地说：c div 不需要浮动，也不需要宽度。就像其他人已经说过的那样：div（作为块级元素）自身跨越整个宽度。

【讨论】：

谢谢。那么没有办法让第三个 div 扩展以填充剩余空间吗？
遗憾的是，我们将不得不等待或赶上
@meo：我非常更喜欢固定宽度而不是流体/弹性/等。你有一个一致的参考框架，不需要担心浏览器缩小到随机重叠的程度，也不需要担心浏览器会扩大到你的行太长而影响可读性，或者你也有元素之间有很多空白。这就像在一张纸上画画——如果我在一张纸的（水平）中间画一个盒子，它就会落在我想要的地方，就像一个固定宽度的设计一样。它不一定更好，但确实更容易。
我认为你不能说固定比流体设计更好。这两种类型都有其存在的理由。对于 web 应用，在屏幕上有大量信息的情况下，使用流畅的布局是完全有意义的。

【解决方案2】：

我认为只为 c div 省去 width 属性就可以了。通常，DIV 将跨越它们可以获得的整个宽度。这个例子对我有用：

<html>
<head>
    <style type="text/css">
        #a {
            width: 50px;
            height: 50px;
            float: left;

            background-color: #ffff00;
        }

        #b {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #ff00ff;
        }

        #c {
            height: 50px;
            background-color: #00ffff;
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>
</html>

【讨论】：

在 c 上没有和宽度，它只是扩展得足够宽以容纳内容 - 可能是因为它是 float:left？
雅普。正如我的示例所示，只需将其省略即可。顺便说一下。使用萤火虫！在那里，您可以在查看页面时轻松添加/删除/禁用/更改 css 属性。这样我就可以找出我的大部分 CSS 错误。
但是没有浮动边框就会乱七八糟。

【解决方案3】：

#container {
float:left
width:100% /*for liquid layout*/
width:960px /*fixed layout*/
height:50px;
}

#a {
float:left;
width:50px;
/*or*/
width:5%;
height:50px;
}

#b {
float:left;
width:50px;
/*or*/
width:5%;
height:50px;
}

#c {
float:left;
width:90%;
/*or*/
width:860px; /* subtract the sum of the container a+b from the container c. */
height:50px;
}

<div id="container">
   <div id="a" />
   <div id="b" />
   <div id="c" />
</div>

如果您添加填充、左边距或右边距，您也必须从总宽度中减去它们。

【讨论】：

我应该在问题中添加，a 和 b 必须具有像素宽度。
这就是为什么我添加了两个值（以 px 和 % 为单位）

【解决方案4】：

而不是浮动 #c，我会给它一个 margin-left 并将 width 保留为自动。

【讨论】：

试过了，但不幸的是没有 c 上的浮动，边框与 a 和 b 重叠导致问题。
您还可以在#b 上设置边距，并根据您的边界调整#b 和#c 的边距。

【解决方案5】：

给你：

<div style='width:200px;background:yellow;float:left'>One</div>
<div style='width:200px;background:orange;float:left'>Two</div>
<div style='background:khaki'>Three</div>

可以根据需要调整One 和Two 的宽度。已在 FF 3.6、IE 8、Safari 4.0、Chrome 3.195 中测试。

编辑

现在，有边框：

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div>
<div style='width:200px;background:orange;float:left;border:1px solid green;margin:0 -1px'>Two</div>
<div style='background:khaki;border:1px solid black;margin-left:400px'>Three</div>

编辑 2

非重叠边框（和对比色），热销：

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div>
<div style='width:200px;background:orange;float:left;border:1px solid blue;margin:0 -1px 0 1px'>Two</div>
<div style='background:purple;border:1px solid orange;margin-left:403px'>Three</div>

【讨论】：

那么c的边界会干扰a和b的边界。
边界？您的示例中的边界在哪里？但是请给我一分钟，我会设置边界。
是的，对不起，我展示了一个简化的例子——直到我尝试移除浮动时，我才意识到它们很重要。
您更新的示例将不起作用。您还需要将边框容纳到 #c 的左侧边距中。显示宽度 != width 属性。
@Agent, @Up - 是的，正如@Agent 所说，#c 的边框将与#b 的边框重叠。不过很容易修复，只需更改为 margin-left:401px，或查看编辑 2 以了解所有不重叠的边框。

【解决方案6】：

不要浮动“c” div。作为一个块元素，它自然会占据视口的整个水平宽度。

您要做的就是简单地使用“c”左侧的边距在“c”旁边给“a”和“b”空间

试试这个：

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
border: 1px #000 solid; /* takes up 2px width - 1px on either side */
}

#b {
float:left;
width:50px;
height:50px;
border: 1px #000 solid; /* takes up 2px width - 1px on either side */
}

#c {
/*   2x 50px wide div elements = 100 px
 * + 2x  1px left borders      =   2 px
 * + 2x  1px right borders     =   2 px
 *                              =======
 *                               104 px
 */
margin-left: 104px; 
}

【讨论】：

没有浮动，c 的边界与 a 和 b 的边界重叠 - 这会导致问题。
@UpTheCreek：边框是元素总宽度的一部分。在确定 #c 上的剩余边距时，您需要将它们考虑在内。例如，如果 #a 和 #b 各有一个 1px 的边框，并且假设没有边距/填充也会增加宽度，那么它们的总宽度将是 50px 的内容和 2px 的边框（1px 左 + 1px 右），给出它们每个的总宽度为 52 像素，因此 #c 需要有 104 像素的左侧边距，而不是我假设您尝试过的 100 像素。
我之前写的这个答案 (stackoverflow.com/questions/4208939/…) 应该澄清一下。

【解决方案7】：

只是不要 float 最后一个 div 然后它会工作。还要删除 100% 的宽度，并给它留出两个固定宽度 div 宽度的左边距。这应该是这样的：

http://jsfiddle.net/YMQbh/

【讨论】：

谢谢。 jsfiddle 是个好工具！
感谢这个简单但解释清楚的答案