Question

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有边框，不能重叠。

Answer 1

只是不要float最后div然后它才会起作用。同时移除100％宽度，并给它两个固定宽度div的宽度的左边距。这应该是这样的：

http://jsfiddle.net/YMQbh/

Answer 2

不要浮动“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; 
}

Answer 3

首先，最好有一个宽度固定的容器。接下来是“c”的100％与容器相关，因此它将跨越整个容器宽度。

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

Answer 4

我认为只需省略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>

Answer 5

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

Answer 6

你走了：

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

Answer 7

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

如果你添加填充，边距或左边或两者，你必须从总宽度中减去它们。

CSS Div 100％with float：left

7 个答案: