CSS Div 100％with float：left
[英]CSS Div 100% with float:left
問題描述
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有邊界，不能重疊。
7 個解決方案
解決方案1
21 已采納 2010-11-18 08:13:52
只是不要float最后一個div然后它會工作。 同時移除100％寬度，並給它兩個固定寬度div的寬度的左邊距。 這應該是這樣的：
解決方案2
3 2010-11-18 07:31:00
不要浮動“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;
}
解決方案3
2 2010-11-18 07:16:59
首先，最好有一個寬度固定的容器。 接下來的是100％的“c”是相對於容器的，所以它將跨越整個容器的寬度。
更新：更准確地說：c div不需要浮動，沒有寬度。 像其他已經說過的那樣：div（作為塊級元素）跨越整個寬度的itselfe。
解決方案4
1 2010-11-18 07:22:38
我認為只要省略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>
解決方案5
1 2010-11-18 07:28:08
而不是浮動#c ，我給它margin-left一個margin-left ，並將width為自動。
解決方案6
1 2010-11-18 07:29:45
干得好：
<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>
解決方案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>
如果添加填充，邊距或左邊或兩者，則必須從總寬度中減去它們。
浮動左 div 100% 寬度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.