html - 如何将2个div一个放在另一个旁边

Question

遵循了很多解决方案我想像这样显示我的图表:

g1 g2
g3 g4

所以我做了这个 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>

使用以下 CSS 谁应该按照我的意愿放置容器:

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

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

但是我有这个:

所以这是正确的，因为我有 2 个容器，但每个容器中的图形不应该在列表中，而是 1-2 然后 3-4，如下所示。

Answer 1

您应该使图表的 width: 50%; 并显示它们:inline-block; 如果我没理解错的话。

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>