如何在我的页面中创建4个修复块

Question

我想在我的页面中创建4个块以显示不同的信息。

理想情况下，我希望得到这样的结果：

创建和定位这些块的最佳方法是什么？

Answer 1

如果您的盒子有固定的高度，那么您可以简单地漂浮它们。

.container {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
}
.box-1, .box-2, .box-3, .box-4 {
    float: left;
    margin: 1%;
    min-height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: teal;
}
.box-1, .box-2 {
    height: 200px;
}
.box-1, .box-3 {
    width: 60%;
}
.box-2, .box-4 {
    width: 36%;
}

演示： http://jsfiddle.net/myajouri/U5X3E/

Answer 2

如果您想要拥有不同高度的块，您可以将右侧的所有块绑定到div，将左侧的块绑定到div中。给包装器div赋予宽度并将它们向左浮动。

<div class="rhs wrap">
    <div>....</div>
    <div>....</div>
</div>
<div class="lhs wrap">
    <div>....</div>
    <div>....</div>
</div>

和css .wrap{ width:50%; float:left; }