如何获得一个2x2网格的div

Question

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

当前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

我建议像http://getbootstrap.com/

这样的东西使用bootstrap

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

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

<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 offset css类，也可以给你的div自定义类并将边距放在那里。

Answer 2

您可以将四个div包装在您想要的容器中，并将每个div浮动到两侧。所以包装容器可能是：

.grid {
  width: 750px;
  height: 450px;
}

这是一个小提琴。

http://jsfiddle.net/rnumjd1q/