Wie 2 div ein platzieren neben das andere

Question

eine Menge Lösung Gefolgt Ich möchte wie diese meine Grafik anzuzeigen:

g1 g2
g3 g4

Also habe ich diese HTML :

<div class="x_content"> 
         <div class="tableChart"> 
         <div class="row"> 
          <div class="col-md-6 col-sm-12 caseR">{{> chart chart_id=this.idChartMem}}</div> 
          <div class="col-md-6 col-sm-12 caseL">{{> chart chart_id=this.idChartCPU}}</div> 
         </div> 
         <div class="row"> 
          <div class="col-md-6 col-sm-12 caseR">{{> chart chart_id=this.idChartNet}}</div> 
          <div class="col-md-6 col-sm-12 caseL">{{> chart chart_id=this.idChartDisk}}</div> 
         </div> 
         </div> 
        </div> 

Mit dem folgenden CSS, die den Behälter legen sollte, wie ich will:

.highcharts-container{ 
    width:100% !important; 
    height:100% !important; 
} 

.caseR, .caseL{ 
    width:100% !important; 
    height:100% !important; 
} 
.caseR{ 
    float: right !important; 
} 
.caseL{ 
    float:left !important; 
} 

Aber ich habe:

So richtig es ist, weil ich 2 Behälter, aber der Graph in jedem von ihnen sollte nicht in einer Liste sein, aber 1-2 dann 3-4 unten.

Answer 1

Sie sollten die width: 50%; der Diagramme machen und sie anzeigen lassen: inline-block; Wenn ich dich richtig verstanden habe.

div { 
 
    display: inline-block; 
 
    min-width: 49%; 
 
    height: 200px; 
 
    background: red; 
 
    border: 1px solid #fff; 
 
}

<div id="1">test</div> 
 
<div id="2">test</div> 
 
<div id="3">test</div> 
 
<div id="4">test</div>