html - 使用 inline-block 和左浮动垂直和水平堆叠内容

Question

所以我想在一个 div 中垂直堆叠项目并水平堆叠多个 div，如下图所示：

每个 div 都定义了一个类名floatbox

<div class="floatbox">
    <label>Screening Type:</label>
    <select></select>
</div>

我为此应用了以下css

.floatbox {
    display: inline-block;
    width: 175px;
    margin: 0;
    padding-top: 5px;
    float: left;
}

我需要浮动，因为IE8 will treat it as a block level element unless you use float。但是，当我添加它时，这些项目会四处移动。我可以通过添加两个额外的<br\>元素来纠正这个问题，但我想知道这是否是最好的解决方案

看这个小提琴的例子

Answer 1

问题是并非所有的浮动框元素都具有相同的高度，因此您可以通过给它们一个来修复它：

.floatbox {
    ...
    height:45px;
    ...
}

适用于您的 jsfiddle 示例。

使用浮动元素强制“换行”的另一种方法是使用 cssclear属性：

<div style="clear:both"></div>

把它放在每 4 个 div 框之后，以确保它会在那里中断。那么您不必使用固定高度，并且可以<br>从代码中删除所有标签（对于两种解决方案）

Answer 2

您可以执行上述答案，但如果您使用 display:inline-block，则根本不需要浮动。http://jsfiddle.net/ApKHE/10/我只在浮动中添加了按钮，将它们放置在右侧框下方，但您可以将它们放置在任何您想要的地方。

.floatbox {
display: inline-block;
width: 175px;
margin: 0;
padding-top: 5px;

}
.floatbox input, select, label {
    width: 150px;
    margin: 0px;
}
.EntryFieldSet {
    width: 735px;
    padding-left: 15px;
    overflow: hidden;
}
#screeningButtons{
    float:right;
    padding-right:30px;
}