如何在不使用表格的情況下浮動div

Question

您好，我如何使用CSS float和其他方法讓div的佈局如此。我試圖避免使用表格，並學習如何正確地浮動div。 謝謝

Answer 1

第一個id使用一個主div與顯示：塊; 然後在你的例子中創建4個子div與顯示：inline-block;

Answer 2

也許看看像Singularity或Susy的解決方案。這兩個有能力的網格框架都能幫助你完成你想要完成的任務，並保持數學的必要性。 ;）

Answer 3

嘆息那些箱子很多; D。我無法準確地看到每個盒子的尺寸，但我盡我所能複製了您展示的內容（不使用絕對或相對定位！）。

這裏的的jsfiddle：link的格式爲奇數，的jsfiddle的tidyUp工作不適合我

這裏的codepen：link用這一個，而不是

訣竅是當你想要事物水平堆疊時使用float：left。當你想讓它們垂直堆疊時，只需將這些元素包裝在一個容器中，並確保每個元素都具有display：block。你用這兩樣東西來完成這種事情。

HTML：

<div id="container"> 
    <div id="left0"> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div id="left1"></div> 
    <div id="left2"></div> 
    <div id="row1"> 
     <div></div> 
     <div></div> 
    </div> 
    <div id="row2"></div> 
    <div id="row3"> 
     <div></div> 
     <div></div> 
    </div> 
</div> 

CSS：

*{ /*includes the border in height&width*/ 
    box-sizing: border-box; 
} 

div{ /*gives us some general spacing*/ 
    margin: 5px; 
    background: lightblue; 
} 

#container{ 
    width: 1200px; 
    margin: 1em auto; 
    background: lightgray; 
} 
/*gives a float-left property to first-level children*/ 
#container > div{ 
    float: left; 
} 

#container > div > div{ 
    border: 1px solid red; 
} 


#left0{ 
    width: 50px; 
} 

#left0 > div{ /*styles for little boxes*/ 
    height: 40px; 
    margin: 5px; 
} 

#left1{ 
    width: 230px; 
    height: 230px; 
} 

#left2{ 
    width: 150px; 
    height: 230px; 
} 

#row1{ 
    width: 600px; 
    height: 50px; 
} 

#row1 div:nth-child(1){ 
    float: left; 
    width: 350px; 
    height: 40px; 
} 

#row1 div:nth-child(2){ 
    float: left; 
    width: 230px; 
    height: 40px; 
} 

#row2{ 
    width: 600px; 
    height: 70px; 
} 

#row3{ 
    width: 600px; 
    height:90px; 
} 

#row3 div:nth-child(1){ 
    width: 200px; 
    height: 40px; 
    float: left; 
} 

#row3 div:nth-child(2){ 
    width: 100px; 
    height: 80px; 
    float: right; 
} 

我會解釋評論我的一些在情況下使用你不熟悉他們的CSS3選擇。