Question

我正在为某人创建一个网站，下一步我需要将div并排排列。我已经尝试过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 */

他们已经集中在一起，这很棒，这就是我想要的和有效的。所以现在我把这些div放在中心位置：

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

这些div居中，这很有效。但是现在我想把这个也集中在上面的div旁边：

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

我知道我很接近，但它不起作用。我已经读过同样题目的其他问题，但没有用。

Answer 1

删除这个＆＃39;左：50％;＆＃39;

#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;
}

这应该使两个部分居中并将它们放在另一个部分之外。

将2个div并排放置（对齐）

2 个答案: