html - 对齐动态生成的 div

Question

我们有一个小部件以包含 n 个 div 的 div 的形式返回一些结果。目前，它们在通常的 div 显示中是一个在另一个之上。有没有办法让它们像每行 2x2 一样并排？

<div class="container-div">
 <div class="result">result1</div>
 <div class="result">result2</div>
 <div class="result">result3</div>
 <div class="result">result4</div>
</div>

目前他们将结果 div 显示在彼此之上，我们可以让它们每行显示 2 个（基于宽度）吗？

谢谢您的帮助！

Answer 1

一个简单的方法使用display: flex：

.container-div{
  display: flex;
  flex-wrap: wrap;
}

.result{
  flex: 1 0 50%;
  display: inline;
}

.container-div{
  display: flex;
  flex-wrap: wrap;
}

.result{
  flex: 1 0 50%;
  display: inline;
}

<div class="container-div">
 <div class="result">result1</div>
 <div class="result">result2</div>
 <div class="result">result3</div>
 <div class="result">result4</div>
</div>

如果您想每行获得更多“结果”，请相应地从 50% 修改百分比：100%/n