ポジショニング4 divs 2 x 2

Question

私はデータを表示するためにいくつかのdivを使用するウェブサイトを構築しています。最初の2つのdivがお互いの下にある必要があり、次の2つはその右側にある必要があります。

最初の2つのdivで問題はありませんが、それ以降は難しくなります。あなたが見ることができるように、2つのdiv要素の最初のコンボが（ゲージがダイビングにあり、日付/時刻がDIVである）OKです

、しかし：これは、それが今のように見えるものです次の2人は正しい場所にいません。

基本的に、多数のgauge/datetimeコンボが存在する可能性があります。余裕があるときは、隣に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