并排放置2个Divs(对齐)

Question

我正在为某人创建一个网站，在下一步中，我需要并排对齐。我已经尝试了Flex，并且对我不起作用。

这是我的html：

    <!-- starting charts1 -->
    <div id="wrapper" style="width:100%"> 
    <div id="columnchart"></div>
    <div id="columnchart2"></div>
    <div id="columnchart3"></div>
    <div id="piechart"></div>
    <div id="barchart"></div>
   </div>
   <!-- ending charts1 -->

在这里您可以看到我尝试了宽度100＆amp;当我将其更改为80％时，当我滚动奇怪的事情时，我的背景就不会遵循。

现在适用于CSS部分：

/* BEGIN VOOR CHARTS */
#wrapper {
position: relative;
float: left;
}
#columnchart {
width: 515px;
position: relative;
margin: auto; 
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}
#columnchart2 {
position: relative;
width: 515px;
margin: auto; 
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}
#columnchart3 {
position: relative;
width: 515px;
margin: auto; 
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}
#piechart {
position: sticky;
width: 515px;
margin: auto; 
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}
#barchart {
position: sticky;
width: 515px;
margin: auto; 
  left:50%;
  right: 0;
  top: 0;
  bottom: 50%;
}
/* END VOOR CHARTS */

他们已经以中心为中心，所以这就是我想要和工作的。所以现在我将那些divs在中心：

<div id="columnchart"></div>
<div id="columnchart2"></div>
<div id="columnchart3"></div>
<div id="piechart"></div>

这些Divs以中心为中心。但是现在我也想居中，但靠近上述divs：

<div id="barchart"></div>

我知道我很亲密，但行不通。我已经阅读了其他标题相同但行不通的问题。

Answer 1

删除此'左：50％;'

#barchart {
position: sticky;
width: 515px;
margin: auto; 
  left:50%;
  right: 0;
  top: 0;
  bottom: 50%;
}

Answer 2

将内容包装在这样的两个容器中：

<div class="cont">
    <div id="columnchart"></div>
    <div id="columnchart2"></div>
    <div id="columnchart3"></div>
    <div id="piechart"></div>
</div>
<div class="cont">
    <div id="barchart"></div>
</div>

然后添加以下CSS：

#wrapper {
    position: relative;
    float: left;
    text-align: center;   /* Use this to align center */
}
.cont {
   display: inline-block;
   vertical-align: top;
   width: 515px;
}

这应该以两个部分为中心，并将它们放在另一个部分中。