對齊多個div-左，中和右
[英]aligning multiple divs - left, center and right
問題描述
我的網站看起來像這樣：
[left div][ center div ][right div]
[ ][right div]
[ ]
[ ]
[ ]
[ ]
如果我嘗試在左側添加另一個div，則它看起來像這樣：
[left div]
[ ]
[left div][ center div ][right div]
[ ][ ][right div]
[ ][ ]
我的CSS：
#left{
width: 140px;
height: auto;
float: left;
clear: left;
}
#center{
float: left;
width:600px;
padding: 10px;
}
#right {
float: right;
height: auto;
width: 140px;
}
我怎樣才能使它看起來像這樣
[left div][ center div ][right div]
[ ][ ][right div]
[left div][ ]
[ ][ ]
[ ][ ]
[left div][ ]
3 個解決方案
解決方案1
2 2011-01-23 13:27:07
您可以使用以下內容：
HTML
<div id="wrapper">
<div class="left"></div><div class="center"></div><div class="right"></div>
<div class="left"></div> <div class="right"></div>
</div>
CSS
#wrapper {width:886px; overflow:hidden}
.left {float:left; width:140px; height:200px; background:red;border:1px solid black;}
.right {float:right;width:140px; height:200px; background:blue;border:1px solid black;}
.center {float:left;width:600px; height:200px; background:grey;border:1px solid black;}
實時示例： http ： //jsbin.com/eroka5/2
解決方案2
1 已采納 2011-01-26 07:35:24
解釋這個想法：您不能在此處的div：left處使用“ clear：left”，因為它將在2個“ left” div之間形成新的一行。
我認為您最好的選擇是創建“包裝紙”：左包裝紙，中央包裝紙和右包裝紙（左上方，右上方和中上方相同）。 然后，您可以將child-div放入寬度為100％的“左包裝紙”中，而無需放置任何東西。
解決方案3
0 2011-01-23 13:28:13
這是實現此目標的示例代碼。
<html>
<head>
<style>
#left,#center,#right{
width:33%;
float:left;
}
#bottomleft,#bottomright
{
width:50%;
float:left;
}
</style>
</head>
<body>
<div width="1024px">
<div id="left">left</div><div id="center">center</div><div id="right">right</div>
<div>
<div>
<div id="bottomLeft" >bottomleft</div> <div id="bottomright">bottomright</div>
</div>
</body>
</html>
將div對齊到左側和中央
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.