CSS定位div

Question

我在定位div時總是很虛弱，但這種情況稍微難以找到在線解決方案。我想要的位置，而像這樣：

_ ___ _ 
|_|| ||_| 
_ | | 
|_||___| 

有沒有辦法避免定義每個人的像素位置明確，使他們插槽成三列，我得到了什麼？

Answer 1

看看這個小提琴：http://jsfiddle.net/rREAh/這是你在找什麼？

如果你需要一個完美的佈局，看看雅虎的佈局管理器：http://developer.yahoo.com/yui/layout/

Answer 2

定義三個容器中的每一列，並漂浮到左：

<div style="float:left;width:Xpx"></div> 
<div style="float:left;width:Ypx"></div> 
<div style="float:left;width:Zpx"></div> 

現在，你可以在適當的地方所有的容器在此列。

Answer 3

參見：http://jsfiddle.net/qXwKT/

CSS：

.box { 
    background: #ffffff; 
    padding: 5px; 
    border: 1px solid #b3b3b3; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

#container { 
    margin: 0 auto; 
    width: 400px; 
    background: #ccc; 
    overflow: hidden 
} 
#left, #right { 
    float: left; 
    width: 75px; 
} 
#mid { 
    float: left; 
    width: 250px; 
} 
#mid .box { 
    margin: 0 10px; 
    border-color: red 
} 
#left .box { 
    margin: 0 0 10px 0; 
    border-color: blue 
} 

HTML：

<div id="container"> 
    <div id="left"> 
     <div class="box">left 1</div> 
     <div class="box">left 2</div> 
    </div> 
    <div id="mid"><div class="box">mid</div></div> 
    <div id="right"><div class="box">right</div></div> 
</div> 

Answer 4

也看看這個：jsfiddle example它有一個流體佈局。

和another one沒有固定格在左下角。