CSS浮动布局：如何让div宽度100%并左浮动？

Question

CSS浮动布局：如何让div宽度100%并左浮动？

12

啊，CSS——我生命中的痛楚。有人能帮帮我吗？

我想要如下的

布局：

*******************************************************************************
*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 会掉到其他 div 的下面）：

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

怎么改才能解决这个问题？谢谢。

额外信息：

a和b必须有固定的像素宽度。
这只是一个简化的例子 - 实际上，divs必须不重叠且有边框。

- UpTheCreek

可能是当设置float:left时将div扩展到最大宽度的重复问题。 - Dragos Rizescu

7个回答

3

不要将 "c" div 设置为浮动。作为块级元素，它自然会占据整个视口的水平宽度。

你想要做的是在 "c" 左侧简单地使用一个 margin，以便在 "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; 
}

- AgentConundrum

没有使用浮点数，c的边框会与a和b的边框重叠 - 这会导致问题。 - UpTheCreek

@UpTheCreek：边框是元素总宽度的一部分。在确定#c的margin-left时，您需要考虑它们。例如，如果#a和#b各有1像素的边框，并且假设没有添加宽度的边距/填充，则它们的总宽度为50像素（内容）和2像素（1像素左+1像素右）的边框，使它们的总宽度为52像素，因此#c的margin-left需要为104像素，而不是您尝试的100像素。 - AgentConundrum

我之前写的这个答案 (https://dev59.com/mVHTa4cB1Zd3GeqPWPh3#4209218) 应该能够澄清一些问题。 - AgentConundrum

2

首先最好有一个固定宽度的容器。其次，“c”的100%宽度是相对于容器的，所以它将占据整个容器的宽度。

更新： 更准确地说：c div不需要浮动和宽度。正如其他人已经说过的：div（作为块级元素）自己就跨越了整个宽度。

- scheffield

谢谢。所以没有办法让第三个 div 扩展以填充剩余的空间吗？ - UpTheCreek

遗憾的是，我们必须等待IE赶上来。 - Sebastian Patane Masuelli

@meo：我非常喜欢固定宽度而不是流体/弹性等。你有一个一致的参考框架，不需要担心浏览器缩小到随机重叠的程度，也不需要担心浏览器扩展到使您的行太长以至于影响可读性，或者在元素之间有太多的空白。就像在一张纸上画画-如果我在一张纸的（水平）中间画一个框，它会落在我想要的位置，就像固定宽度设计一样。这并不一定更好，但它确实更容易。 - AgentConundrum

我认为你不能说固定设计比流式设计更好。两种类型都有它们存在的理由。对于网页应用程序，在屏幕上有大量信息时，使用流式布局是完全有意义的。 - meo

1

与其使用浮动的#c，我会给它一个margin-left并将width保持为自动。

- Xr.

尝试过了，但不幸的是，在C上没有浮点数，边框与A和B重叠导致问题。 - UpTheCreek

您还可以在#b上设置边距，并根据您的边框调整#b和#c的边距。 - Xr.

1

我认为完全不使用c div的宽度属性就可以了。通常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>

- philgiese

在C语言中，如果没有设置宽度，它会自动扩展以适应内容的宽度 - 可能是因为它使用了float:left属性？ - UpTheCreek

Yapp。就像我的例子所示，把它留出来。顺便说一下，使用Firebug！在那里，您可以轻松地添加/删除/禁用/更改CSS属性，同时查看页面。这样我就能找出大部分CSS错误了。 - philgiese

但是如果没有浮动，边框会混乱。 - UpTheCreek

1

请看这里：

<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>

- Ben

那么c的边界会与a和b的边界产生冲突。 - UpTheCreek

边框？你的例子中哪里有边框？等我一下，我会加上边框。 - Ben

是的，抱歉我只是展示了一个简化的例子 - 直到我尝试去掉浮点数才意识到它们的重要性。 - UpTheCreek

你的更新示例不起作用。你需要将边框也纳入 #c 的 margin-left 中。显示宽度 != 宽度属性。 - AgentConundrum

@Agent，@Up - 是的，就像@Agent所说的那样，#c的边框将被#b上的边框覆盖。不过很容易解决，只需更改为margin-left:401px，或者查看编辑2以获取所有边框不重叠的内容。 - Ben

0

#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>

如果您添加了填充、右侧或左侧的边距，或者两者都添加了，那么您必须从总宽度中减去它们。

- chchrist

我应该在问题中加入，a和b必须具有像素宽度。 - UpTheCreek

这就是为什么我添加了两个值（以px和%表示）的原因。 - chchrist

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meo · Accepted Answer

只需不要将最后一个 div 浮动，它就可以工作了。此外，请删除 100% 的宽度，并给它一个左边距，该左边距为您的两个固定宽度 div 的宽度。应该看起来像这样：

http://jsfiddle.net/YMQbh/