如何对齐 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

如果你在彼此之间放置足够的填充，它会强制它转到下一行。您还应该添加 float: right.

Answer 2

试试这个：

<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 3

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

对于 IE < 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 4

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

.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>d</div> 之后自动插入一个加法 <div></div> 很奇怪，但忽略代码应该在您要求的任何浏览器....

如何对齐 div 这样的？

How do I align div like this?

html

css

alignment