Question

我想在一个页面中并排放置2个不同的高级图表。一个是饼图，另一个是计量表。你能帮我组织一下这个结构吗？

Answer 1

你可以使用浮动。有关float的更多信息可用here。试试这样的事情。

#chart1{
    width: 50%; /* set width to 50% of page width */
    float: left; /* Make the element go to the left */
}

#chart2{
    width: 50%;
    float: right;
}

不要忘记将style="clear: both"添加到下一个元素！祝好运！希望这有帮助！

Answer 2

一种选择是使用flexbox。

＆＃13;

.container {
  display: flex;
  width: 100%;
  height: 150px;
}

.chart1,
.chart2 {
  width: 50%;
  background-color: lightblue;
  border: thin solid darkgray;
}

＆＃13;

<div class="container">
  <div class="chart1">chart 1</div>
  <div class="chart2">chart 2</div>
</div>

＆＃13;

Answer 3

您可以添加像这样的引导类

<div class="col-md-12">
  <div class="col-md-6">
    Chart 1
  </div>
  <div class="col-md-6">
    Chart 2
  </div>
</div>

如何将两个不同的图表彼此相邻？

3 个答案: