CSS：在父级内部对齐动态创建的具有可变宽度的div

时间：2017-07-28 06:12:07

标签： javascript html css css3

我正在动态生成子div并将它们附加到parent.Each子div具有不同的宽度。

＆＃13;
＆＃13; 
  .parent{
    width:250px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .child{
      margin: 2px;
      float : left;
  }
＆＃13; 
<div class="parent">
    <div class="child" style="width:50px">1.2345</div>
    <div class="child" style="width:60px">1:234235</div>
    <div class="child" style="width:60px">1:234245</div>
    <div class="child" style="width:70px">1:23426565</div>
    <div class="child" style="width:30px">1:25</div>
    <div class="child" style="width:40px">1345</div>
    <div class="child" style="width:50px">1:23045</div>
    <div class="child" style="width:50px">1:23265</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:30px">1:45</div>
    <div class="child" style="width:40px">1:234</div>
    <div class="child" style="width:70px">1:23325545</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:60px">1:232545</div>
    <div class="child" style="width:60px">1:23425</div>
    <div class="child" style="width:50px">1:235</div>
    <div class="child" style="width:40px">1:25</div>
</div>
＆＃13;
＆＃13;
＆＃13;

小提琴（略有不同标记和CSS）：https://jsfiddle.net/tgohguyj/

我怎么能在这里证明儿童div？

3 个答案:

答案 0 :(得分：2)

您可以在justify-content:space-between

上使用parent样式

在这里阅读更多相关信息＆gt; justify-content

编辑你可以使用.parent .child:last-child { margin-right:auto }所以如果最后一行只有2个元素，那么最后一个元素将与前一个元素对齐

见下文

＆＃13;
＆＃13; 
.parent{
    width:250px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
    
}
.parent .child:last-child {
  margin-right: auto;
}

.child{
    margin: 2px;
    border:1px solid red;
    box-sizing:border-box;
}
＆＃13; 
<div class="parent">
    <div class="child" style="width:50px">1.2345</div>
    <div class="child" style="width:60px">1:234235</div>
    <div class="child" style="width:60px">1:234245</div>
    <div class="child" style="width:70px">1:23426565</div>
    <div class="child" style="width:30px">1:25</div>
    <div class="child" style="width:40px">1345</div>
    <div class="child" style="width:50px">1:23045</div>
    <div class="child" style="width:50px">1:23265</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:30px">1:45</div>
    <div class="child" style="width:40px">1:234</div>
    <div class="child" style="width:70px">1:23325545</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:60px">1:232545</div>
    <div class="child" style="width:60px">1:23425</div>
    <div class="child" style="width:50px">1:235</div>
 
</div>
＆＃13;
＆＃13;
＆＃13; 编辑2：您可以使用.parent的伪元素，其行为类似于.child，因此它将是一个flex-child（您可以为其添加宽度）或不，取决于你希望你的最后一行看起来像

＆＃13;
＆＃13; 
.parent{
    width:250px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
    
}
.parent:after {
  content: '';
  width:50px;
}
.child{
    margin: 2px;
    border:1px solid red;
    box-sizing:border-box;
}
＆＃13; 
<div class="parent">
    <div class="child" style="width:50px">1.2345</div>
    <div class="child" style="width:60px">1:234235</div>
    <div class="child" style="width:60px">1:234245</div>
    <div class="child" style="width:70px">1:23426565</div>
    <div class="child" style="width:30px">1:25</div>
    <div class="child" style="width:40px">1345</div>
    <div class="child" style="width:50px">1:23045</div>
    <div class="child" style="width:50px">1:23265</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:30px">1:45</div>
    <div class="child" style="width:40px">1:234</div>
    <div class="child" style="width:70px">1:23325545</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:60px">1:232545</div>
    <div class="child" style="width:60px">1:23425</div>
    <div class="child" style="width:50px">1:235</div>
 
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以将justify-content:space-between;用于父级。删除.child的浮动。浮动对弹性框没有影响。

.parent {
  width: 250px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.child {
  margin: 2px;
}
<div class="parent">
  <div class="child" style="width:50px">1.2345</div>
  <div class="child" style="width:60px">1:234235</div>
  <div class="child" style="width:60px">1:234245</div>
  <div class="child" style="width:70px">1:23426565</div>
  <div class="child" style="width:30px">1:25</div>
  <div class="child" style="width:40px">1345</div>
  <div class="child" style="width:50px">1:23045</div>
  <div class="child" style="width:50px">1:23265</div>
  <div class="child" style="width:50px">1:2345</div>
  <div class="child" style="width:50px">1:2345</div>
  <div class="child" style="width:30px">1:45</div>
  <div class="child" style="width:40px">1:234</div>
  <div class="child" style="width:70px">1:23325545</div>
  <div class="child" style="width:50px">1:2345</div>
  <div class="child" style="width:60px">1:232545</div>
  <div class="child" style="width:60px">1:23425</div>
  <div class="child" style="width:50px">1:235</div>
  <div class="child" style="width:40px">1:25</div>
</div>

答案 2 :(得分：0)

我认为你需要向孩子添加flex-grow:1属性

＆＃13;
＆＃13; 
.parent{
    width:250px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .child{
      margin: 2px;
      float : left;
      flex-grow: 1;
      border: 1px solid #ddd;
  }
＆＃13; 
<div class="parent">
    <div class="child" style="width:50px">1.2345</div>
    <div class="child" style="width:60px">1:234235</div>
    <div class="child" style="width:60px">1:234245</div>
    <div class="child" style="width:70px">1:23426565</div>
    <div class="child" style="width:30px">1:25</div>
    <div class="child" style="width:40px">1345</div>
    <div class="child" style="width:50px">1:23045</div>
    <div class="child" style="width:50px">1:23265</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:30px">1:45</div>
    <div class="child" style="width:40px">1:234</div>
    <div class="child" style="width:70px">1:23325545</div>
    <div class="child" style="width:50px">1:2345</div>
    <div class="child" style="width:60px">1:232545</div>
    <div class="child" style="width:60px">1:23425</div>
    <div class="child" style="width:50px">1:235</div>
    <div class="child" style="width:40px">1:25</div>
</div>
＆＃13;
＆＃13;
＆＃13;

（添加了边框以使子元素的宽度更清晰。）

相关问题
最新问题