html - 如何获得 2x2 的 div 网格

Question

如何通过使用 CSS 和 HTML 实现类似于下面的网格布局？我尝试过使用 float 和边距，但这只允许我复制第一行。

当前的 HTML

<div id="lens_logo"><img src="images/about-lens.png"></div>
<div id="lightfield_logo"></div>
<div id="body_logo"></div>
<div id="spec_logo"></div>

当前的 CSS

#lens_logo {
    height: 200px;
    width: 350px;
    margin-left: 50px;
    margin-bottom: 50px;
    float: left;
    background-color: #000;
}

#lightfield_logo {
    height: 200px;
    width: 350px;
    margin-left: 200px;
    margin-bottom: 50px;
    float: left;
    background-color: #000;
}

#body_logo {
    height: 200px;
    width: 350px;
    background-color: #000;
    margin-left: 200px;
    float: left;
}

#spec_logo {
    height: 200px;
    width: 350px;
    background-color: #000;
    margin-left: 200px;
    float: left;
}

产生这个结果:

Answer 1

我会为这样的东西推荐 bootstrap http://getbootstrap.com/

它的网格系统非常强大且易于使用。

您可以使用以下代码段的扩展来实现此网格:

<div class="row">
    <div class="col-xs-5"></div>
    <div class="col-xs-5"></div>
</div>
<div class="row">
    <div class="col-xs-5"></div>
    <div class="col-xs-5"></div>
</div>

要实现 div 之间的空间，您可以使用 Bootstrap 偏移 css 类或给您的 div 自定义类并将边距放在那里。