Question

我将在父div中创建几个子div，因为我希望将子div放到底部。我使用css强制子div降到最低点，但是我也想要几个孩子div 如果创建它们，它们将逐行显示，但目前结果是无论创建多少子div，它们都显示在同一行中。如何逐行显示子div？这是我的CSS。

 .myProgress {
  position: relative;
  display:flex;
  width: 100%;
  height: 30px;
  margin-top: auto;
  margin-bottom:150px;
  background-color: #ddd;
}

.myBar {
  position: relative;
  width: 1%;
  height: 100%;
  margin-top: auto;
  background-color: #4CAF50;
}

.nav {
    float: left;
    display:flex;
    width: 40%;
    margin: 0;
    padding: 1px;
}
<div class="nav">
    <div id="myProgress" class="myProgress" style="width:350px;">
       <div id="div01" class="myBar" style="width: 100%;"></div>
       <div id="div02" class="myBar" style="width: 100%;"></div>
       <div id="div03" class="myBar" style="width: 100%;"></div>
    </div>
</div>

这是三个div的结果，他们掉到了同一排，我认为它应该是由于放入底部css的力量造成的。有没有办法可以放入底部但逐行显示，例如。如果三个孩子div然后显示三行？

Answer 1

您在/$MULE_HOME/apps/

上使用display:flex;

如果您还将.myProgress添加到flex-direction: column;，那么它会在最后一个下方添加每个div。

JS Fiddle

More info on Flexbox

Answer 2

使用此css，

tabbars

如何逐行创建动态创建的div堆栈

2 个答案: