定位4个div 2-by-2

Question

我正在建立一个网站，我在其中使用几个div来显示数据。我需要前两个div在彼此之下，接下来的两个div应该在右边。

我对前两个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