我该如何对齐这样的div？

Question

我想放4个div：每行2个，并排。如下图所示。这是我到目前为止所做的：

<div style="width: 800px;">
 <div style="float: left; width: 200px;">aaaa</div>
 <div style="float: left; width: 200px;">bbbb</div>
 <div style="float: left; width: 200px;">cccc</div>
 <div style="float: left; width: 200px;">dddd</div>
 <br style="clear: left;" />
</div>

这确实将它们并排排列，但在同一条线上。

图像：

Answer 1

试试这个：

<div style="width: 800px;">
 <div style="float: left; width: 200px;">aaaa</div>
 <div style="float: left; width: 200px;">bbbb</div>
 <br style="clear: left;" />
 <div style="float: left; width: 200px;">cccc</div>
 <div style="float: left; width: 200px;">dddd</div>
 <br style="clear: left;" />
</div>

Answer 2

这应该这样做 - 但要警惕那些不支持内联块的IE早期版本。

对于IE＆lt; 8 - 是的，人们仍在使用它们！

（在外部CSS文件而不是内联CSS中使用以下示例）

<!--[if lt IE 8]>
    <style type='text/css'>
        .left, .right {
          display:inline;
          zoom:1;
        }
    </style>
<![endif]-->

适用于Chrome，FF等及以后的IE版本

这应该没问题 - 但是承担它不会在移动设备上很好地扩展。 http://jsfiddle.net/re664kmd/

<style type='text/css'>
    div.container {
      width:800px;
      margin:0 auto;
    }
    div.left, div.right {
      display:inline-block;
      width:200px;
      height:100px;
    }
    div.left {
      background:#00aeed;
    }
    div.right {
      background:#bed700;
    }
</style>
<div class='container'>
  <div class='left'></div>
  <div class='right'></div>
  <br />
  <div class='left'></div>
  <div class='right'></div>
</div>

为了让您的生活更轻松 - 请考虑使用Bootstrap玩游戏：D http://getbootstrap.com/css/#grid

Answer 3

实际上是一个响应式网格......

.content{
  width:100%;
  border:1px solid green;
  box-sizing: border-box;
  display:inline-block;
}

.content div{
  padding:20px;
  float:left;
  box-sizing: border-box;
  width:45%;
  border:1px solid red;
  margin:2.5%;
}

<div class="content">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
<div>

//就像评论我认为代码片段的代码版本有一个错误，因为在<div></div>奇怪之后自动插入一个加法<div>d</div>，但只是忽略代码应该在任何浏览器中工作正如你所要求的......

Answer 4

我在彼此之间放置足够的填充物会强制它进入下一行。您还应添加float: right。