Question

我想在我的父div之一添加多列布局来显示小窗口小部件。我从左，中，右三列开始。

我尝试使用以下方法让列彼此显示：

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/

在前一个div中使用float:left下一个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;
}

在此处查看LIVE：http://jsfiddle.net/Whysg/3/

使用div创建多列布局

3 个答案: