html - 如何在我的页面中创建 4 个修复 block

Question

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

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

创建和定位这些 block 的最佳方式是什么？

Answer 1

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

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