css - 使用 div 创建多列布局

Question

我想向我的父 div 之一添加多列布局以显示小部件。我从左、中、右 3 列开始。

我尝试使用以下方法让列彼此相邻显示:

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

但是没有用JS Fiddle

我也尝试过使用:

float: left;

但还是没有成功JS Fiddle

我通过使用正确地获得了它:

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 中，这样就不需要边距或 ...