Question

我创建了一个仪表板解决方案，其中高度不断变化的对象分为两列。目的是将对象分布在列上，如下所示：

第一个对象在第一列的左上方
下一个对象位于该对象下方，除非没有足够的空间容纳该对象的整个高度，否则，将其放在第二列中。
如果对象不能容纳在第二列的可用空间中，则将对象分布在各列上，以实现两个具有相同高度的列，并使容器div可滚动。

对象没有固定高度，一个对象在星期一可以为空，而在星期二占据整个左列。

我创建了以下内容：

<div id='container'>
  <div id='columncontainer'>
    <span id='span1'>Block1</span>
    <span id='span2'>Block2</span>
    <span id='span3'>Block3</span>
  </div>
</div>

。

#container{
  overflow-y: auto;
  height: 300px;
  width: 400px;
}

#columncontainer {
  column-count: 2;
}

#columncontainer > span {
  width: 100%;
  display: inline-block;
}

#span1 {
  height: 200px;
  width: 200px;
}

#span2 {
  height: 200px;
  width: 200px;
}

#span3 {
  height: 50px;
  width: 200px;
}

此解决方案存在的问题已在此处演示，并在Chrome浏览器中发生： https://jsfiddle.net/3620qgvs/

在此示例中，列中的最后两个对象很容易放入第二列中（200 + 50 = 250 <300）。

但是前两个对象显示在第一列中，高度为50px的＃span2本身具有第二列的整个300px。

我确实希望将对象保持在一起，因此不能选择使用块而不是内联块。（这会将对象分为两列）

我尝试过的将对象放置在（浮动）线上或（柔性）网格上的实现都有相同的问题；如果左列中有两个大高度对象，则右列中的两个小高度对象之间将有很多垂直空白（此处显示的块2和4之间的空白：https://jsfiddle.net/3kd9r8ye/2/）。这就是为什么我使用列计数的原因，因为它的功能类似于“ float：down”（不存在）

任何解决方案或替代方法？

Answer 1

这是column-count属性中常见的问题。对于您的问题，您可以使用以下解决方案，该解决方案在很少css changes的情况下也可以正常工作，并且我在您的问题中注意到您重复了元素ID，从而导致HTML无效。因此，今后请避免使用css classes。

#container {
  overflow-y: auto;
  height: 300px;
  width: 400px;
  border: 1px solid black;
}

#columncontainer {
  /* column-count: 2;*/
  border: 1px solid red;
  width: 100%;
}

#columncontainer>span {
  /*width: 100%;*/
  display: inline-block;
  background-color: #CCCC;
  margin: 5px;
  border: 1px solid blue;
  width: calc(50% - 15px);
}

.block1,
.block2 {
  height: 200px;
  width: 200px;
}

.block3 {
  height: 50px;
  width: 200px;
}

<div id='container'>

  <div id='columncontainer'>
    <span id='span1' class="block1">Block1</span>
    <span id='span2' class="block2">Block2</span>
    <span id='span3' class="block3">Block3</span>
  </div>

</div>

Answer 2

事实证明，在Chrome CSS中，“孤立”和“寡妇”属性默认设置为2，而其他浏览器似乎保持为1。

为了解决我描述的问题，应在#columncontainer上添加以下CSS属性：

orphans: 1
widows: 1

这将防止Chrome尝试停留在某一列上。

进一步的参考：

drafts.csswg.org的摘录：

If a block contains fewer lines than the value of widows or orphans, the rule simply becomes that all lines in the block must be kept together.

使用CSS列数在两列之间平衡对象：Chrome中为2

2 个答案: