使用内联块垂直和水平堆叠内容并向左浮动

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\>元素来纠正这个问题，但我想知道这是否是最好的解决方案

请参阅此fiddle以获取示例

Answer 1

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

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

适用于你的jsfiddle示例。

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

<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;
}