Question

我想获得类似于平衡文本行的结果，但是对于块元素。说一个300 / 100px容器中的50 / 50px盒子的集合。将容器中的盒子浮动将使它们填满一行“行”，然后将其包裹到下一行：

[1][2][3][4][5][6]
[7]

我希望他们以更平衡的方式“包装”：

[1][2][3][4]
[5][6][7]

甚至更好，让它们“填充”每个填充空间的列：

[1][3][5][7]
[2][4][6]

我认为您可以使用 CSS列执行此操作，但感觉就像是一个黑客，因为容器元素需要float:left或display:inline-block来强制列粘在一起，它需要一个约束高度等我已经添加了一个片段供参考。

有没有更真实的CSS方法来实现这一目标？

.wrap {
  display: inline-block; /*Needs this so make colums stick together*/
  columns: 100px;
  column-gap: 0;
  height: 200px; 
}

.wrap>div {
  width: 98px;
  height: 98px;
  background: red;
  /* styling only */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid blue;
}

<div class="wrap">
  <div>1Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
  <div>2Mauris eu risus.</div>
  <div>3Vestibulum auctor dapibus neque.</div>
  <div>4Consectetuer adipiscing elit.</div>
  <div>5Eu risus.</div>
  <div>6Vestibulum auctor dapibus neque.</div>
  <div>7Lorem ipsum dolor sit amet</div>
  <div>8Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div>9Vestibulum auctor dapibus neque.</div>
</div>

Answer 1

此处＆＃39; sa flexbox解决方案：在父元素上使用flex-direction: column和flex-wrap: wrap，您可以使项目从上到下换行，并在列填充后填充另一列

这是让Flexbox正常工作的代码：

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;

这是一个演示：

＆＃13;

.wrap {
  background-color: silver;
  height: 100px;
  width: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}
.box { 
  height: 50px;
  width: 50px;
  background-color: red;
  box-sizing: border-box;
  border: 1px solid white;
}

＆＃13;

<div class="wrap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

＆＃13;

平衡块元素，如打印中的文本行

1 个答案: