4

想inline-block用横列制作。我需要每个inline-block宽度作为最小的列数来适应内容。

问题是浏览器处理奇怪的列。

div {
  height: 10em;
  border: 1px solid red;
  display: inline-block;
  vertical-align: top;

  -moz-column-width: 10em;
  column-width: 10em;
  -moz-column-fill: auto;
  column-fill: auto;
}
<div>
  <p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo perfecto pericula ex. Te nam tritani honestatis, eam integre virtute ut.</p>
  <p>Cum an autem affert laoreet, ea ius falli impedit ocurreret. No duo aperiam perfecto lobortis, ut mea aliquid graecis, te has facete sententiae. Ut singulis laboramus his, meis laoreet docendi ius ad. Duo nisl alterum perfecto no, eum in etiam laboramus prodesset, rebum nobis nusquam in sit. Usu at expetendis consectetuer.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo perfecto pericula ex. Te nam tritani honestatis, eam integre virtute ut.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, an nec posse homero accumsan.</p>
</div>
<div>
  <p>Lorem ipsum</p>
</div>

Chrome可能会确定没有列的宽度，而不是将列放入该区域。第一个块有一列有额外的空间。其他块的宽度可能为一列，但它们都有不同的宽度：

铬截图

Firefox将所有块的宽度设置为单列，xt 会溢出它。我可以在元素或其任何容器上强制滚动条，但我不能使它们中的任何一个具有正确的宽度。

火狐截图

我有一个 hack 让 Chrome 表现得像 Firefox，但它并不能帮助我解决问题：

div {
  height: 10em;
  border: 1px solid red;
  display: inline-block;
  vertical-align: top;

  -moz-column-width: 10em;
  column-width: 10em;
  -moz-column-fill: auto;
  column-fill: auto;
  
  /* chrome to firefox */
  width: -webkit-min-content;
  width: min-content;
  min-width: 10em;
}
<div>
  <p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo perfecto pericula ex. Te nam tritani honestatis, eam integre virtute ut.</p>
  <p>Cum an autem affert laoreet, ea ius falli impedit ocurreret. No duo aperiam perfecto lobortis, ut mea aliquid graecis, te has facete sententiae. Ut singulis laboramus his, meis laoreet docendi ius ad. Duo nisl alterum perfecto no, eum in etiam laboramus prodesset, rebum nobis nusquam in sit. Usu at expetendis consectetuer.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo perfecto pericula ex. Te nam tritani honestatis, eam integre virtute ut.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, an nec posse homero accumsan.</p>
</div>
<div>
  <p>Lorem ipsum</p>
</div>

其实我需要得到这样的东西：

预期结果

PS：俄语中的同​​样问题。

4

1 回答 1

1

如果需要 javascript，我有一个简单的解决方案，适用于固定大小的容器。如果大小可以动态变化，则需要重新计算（并且应该首先重置内联样式）。

在 Chrome 51、FF 47、IE 11 和 Opera 12 中正常工作。

var divs = document.querySelectorAll("div");

for (var q=0; q<divs.length; ++q) {
  //divs[q].style.width = ""; // Reset old value if refreshing
  divs[q].style.width = divs[q].scrollWidth + 'px';
}
div {
  height: 10em;
  border: 1px solid red;
  display: inline-block;
  vertical-align: top;

  -moz-column-width: 10em;
  column-width: 10em;
  -moz-column-fill: auto;
  column-fill: auto;
  
  /* chrome to firefox */
  width: -webkit-min-content;
  width: min-content;
  min-width: 10em;
}
<div>
  <p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo perfecto pericula ex. Te nam tritani honestatis, eam integre virtute ut.</p>
  <p>Cum an autem affert laoreet, ea ius falli impedit ocurreret. No duo aperiam perfecto lobortis, ut mea aliquid graecis, te has facete sententiae. Ut singulis laboramus his, meis laoreet docendi ius ad. Duo nisl alterum perfecto no, eum in etiam laboramus prodesset, rebum nobis nusquam in sit. Usu at expetendis consectetuer.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo perfecto pericula ex. Te nam tritani honestatis, eam integre virtute ut.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, an nec posse homero accumsan.</p>
</div>
<div>
  <p>Lorem ipsum</p>
</div>

于 2016-07-27T16:23:01.153 回答