使用 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 位置时，不需要边距或 ...

Answer 2

你不应该使用 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;
}

Answer 3

你有没有想过用花车代替？删除边距。

#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/