CSS Div 100％with float：left
[英]CSS Div 100% with float:left
问题描述
Agrh, CSS - the bane of my life. 
Agrh，CSS - 我生命中的祸根。 Can someone help out here? 有人可以帮忙吗？
I'm trying to get the following div layout: 我正在尝试获得以下div布局：
*******************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*******************************************************************************
Currently my styles look like this: 目前我的样式看起来像这样：
#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>
But this is causing the following to happen (div c drops below the others): 但这会导致以下情况发生（div c低于其他）：
********************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb *
*aaaaaaaaaa bbbbbbbbbbbb *
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
********************************************************************************
What needs to change to fix this? 需要改变什么来解决这个问题？ Thanks. 谢谢。
Additional info: 附加信息：
a and b must have fixed pixel widths.
a和b必须具有固定的像素宽度。 This is a simplified example - in reality the divs have borders which must not overlap.
这是一个简化的例子 - 实际上div有边界，不能重叠。
7 个解决方案
解决方案1
21 已采纳 2010-11-18 08:13:52
Just don't float the last div then its gonna work. 只是不要float最后一个div然后它会工作。 Also remove the 100% width and give it a left margin of the width of your two fixed width divs. 同时移除100％宽度，并给它两个固定宽度div的宽度的左边距。 This should look like this: 这应该是这样的：
解决方案2
3 2010-11-18 07:31:00
Don't float the "c" div. 不要浮动“c”div。 As a block element, it will naturally take up the whole horizontal width of the viewport. 作为块元素，它自然会占据视口的整个水平宽度。
What you want to do is to simply use a margin on the left side of "c" to give "a" and "b" room beside "c" 你想要做的是简单地在“c”的左侧使用边距，在“c”旁边给出“a”和“b”房间
Try this: 尝试这个：
#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;
}
解决方案3
2 2010-11-18 07:16:59
first of all its better to have a container with a fixed width. 首先，最好有一个宽度固定的容器。 The next thing is that the 100% with of "c" is relative to the container, so it will spann the whole container width. 接下来的是100％的“c”是相对于容器的，所以它将跨越整个容器的宽度。
Update: To say it more precise: the c div needs no floating an no width. 更新：更准确地说：c div不需要浮动，没有宽度。 Like others already said: A div (as blocklevel element) spans by itselfe the whole width. 像其他已经说过的那样：div（作为块级元素）跨越整个宽度的itselfe。
解决方案4
1 2010-11-18 07:22:38
I think just leaving out the width attribute at all for the c div should do the work. 我认为只要省略c div的width属性就可以完成工作。 Normally DIVs will span the whole width they can get. 通常情况下，DIV会跨越他们可以获得的整个宽度。 This example worked for me: 这个例子对我有用：
<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>
解决方案5
1 2010-11-18 07:28:08
而不是浮动#c ，我给它margin-left一个margin-left ，并将width为自动。
解决方案6
1 2010-11-18 07:29:45
Here you go: 干得好：
<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>
Can adjust One and Two widths as needed. 可根据需要调整One和Two宽度。 Tested working in FF 3.6, IE 8, Safari 4.0, Chrome 3.195. 测试在FF 3.6，IE 8，Safari 4.0，Chrome 3.195中工作。
EDIT 编辑
Now, with borders: 现在，有边框：
<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>
EDIT 2 编辑2
Non-overlapping borders (and contrasting colors), hot off the press: 不重叠的边框（和对比色），新闻热：
<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>
解决方案7
0 2010-11-18 07:23:44
#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>
If you add padding,margin right or left or both you must subtract them from the total width too. 如果添加填充，边距或左边或两者，则必须从总宽度中减去它们。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.