Question

我们有一个小部件，它以div的形式返回一些结果，该div包含n个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

对齐动态生成的div

1 个答案: