html - 定位 4 个 div 2×2

Question

我正在构建一个网站，我在其中使用一些 div 来显示数据。我需要前 2 个 div 彼此下方，接下来的 2 个应该在其右侧。

我对前 2 个 div 没有任何问题，但之后就变得棘手了。这是现在的样子:

如您所见，2 个 div 的第一个组合(仪表在潜水中，日期/时间在 div 中)没问题，但接下来的 2 个不在正确的位置。

Basecaly，可以有大量的仪表/日期时间组合。当有空间时，我喜欢将 2 个并排放置，当屏幕太小时，我希望它们显示在彼此下方。

HTML/css 现在看起来像这样:

<div class="panel-body">
<a href="http://localhost:8000/chart/116">
   <div id="sensor_116_0" style="height: 200px; width: 300px; float:left;">        </div>
</a>

<div style="display:block;height: 50px; width: 300px; float:left; clear: both;"><button type="button" class="btn btn-dashboard btn-default disabled">2016-07-17 14:42:00</button> 
</div>

<a href="http://localhost:8000/chart/114">
<div id="sensor_114_1" style="height: 200px; width: 300px; float:left;">
</div>
</a>

<div style="display:block;height: 50px; width: 300px; float:left; clear: both;"><button type="button" class="btn btn-dashboard btn-default disabled">2016-07-17 14:42:00</button>
</div>
</div>

我尝试了各种方法，但无法按照我想要的方式进行概述。我有什么办法可以解决这个问题吗？

Answer 1

希望这能奏效，这可能需要一些调整，我想你可以修复那些我相信，如果没有让我知道。

HTML

<div class="content">
 <div class="A">
  hello A    
  </div>
  <div class="B">
  hello B
  </div>
  <div class="C">
   hello C
   </div>
   <div class="D">
   hello D
   </div>
   </div>

CSS

.content{
 width:500px;
  height:auto;
  background-color:yellow;
  }

 .A, .B, .C, .D{
  width : 45%;
  height: auto;
  float:left;
   background-color: red;
   margin-top:5px;
    }

  .span_to_add{

   margin-top:10px;
    }

   .B, .D{
   margin-left:5px;
   }

FIDDLE