用div創建多列布局

Question

我想爲我的父div中的一個添加多列布局以顯示小部件。我開始了左邊，中間和右邊的3列。

我試圖讓列通過使用相鄰顯示：

display: inline-block; 
vertical-align: top; 

但它沒有工作JS Fiddle

我還試圖用：

float: left; 

但再次沒有成功JS Fiddle

我知道了ri GHT使用：

display: table-cell 

現在我的問題是，利用這最後的方法時，它設置一個最小寬度後，它無法擴展任何小，它增加了一個滾動條，這是我做的不是頁面的底部想。

我想知道爲什麼前兩種方法在我的方案中不起作用，因爲我在SO上發現了其他答案，表明前兩種方法是可能的解決方案。

CSS

#left_widget_column { 
border: 0px; 
margin: 10px 65% 10px 2%; 
padding: 0px; 
width: 32%; 
} 

#middle_widget_column { 
border: 0px; 
margin: 10px 34% 10px 34%; 
padding: 0px; 
width: 31%; 
} 

#right_widget_column { 
border: 0px; 
margin: 10px 2% 10px 65%; 
padding: 0px; 
width: 32%; 
} 

HTML

<div id="left_widget_column"> 
<h2>Widget 1:</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit venenatis tempor. Mauris sit amet consequat dui.</p> 
</div> 

<div id="middle_widget_column"> 
<h2>Widget 2:</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit venenatis tempor. Mauris sit amet consequat dui.</p> 
</div> 

<div id="right_widget_column"> 
<h2>Widget 3:</h2> 
<p>Fusce felis nisl, egestas a dolor sit amet, mollis cursus diam. Nulla malesuada ullamcorper ante. Vestibulum pulvinar, metus a congue eleifend, magna eros mattis lectus, sed vestibulum neque augue vel risus.</p> 
</div> 

Answer 1

你不應該使用：

margin: 10px 34% 10px 34%; 

http://jsfiddle.net/Whysg/2/

當使用float:left在以前div div內的下一個位置，所以這是不需要保證金或...

Answer 2

你有沒有想過使用浮動代替？刪除邊距。

#left_widget_column { 
border: 0px; 
padding: 0px; 
float: left; 
    width: 32%; 
} 

#middle_widget_column { 
border: 0px; 
padding: 0px; 
width: 32%; 
    float: left; 
} 

#right_widget_column { 
border: 0px; 
padding: 0px; 
width: 32%; 
    float: right; 
} 

看到它住在這裏：http://jsfiddle.net/Whysg/3/

Answer 3

你不應該使用3的ID：1類佈局就足夠了。例如，您可以稍後添加id以在js中使用它。

DEMO

.col { 
    box-sizing: border-box; 
    float: left; 
    width: 32%; 
    padding: 10px; 
    margin-left: 2%; 
} 
.col:first-child { 
    margin-left: 0; 
}