使列具有正确宽度的内联块

Question

想要使用horizo​​nlal列制作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 将所有块宽度设置为单个列，并且该文本溢出它。我可以强制元素或其任何容器上的滚动条，但我不能使它们中的任何一个具有正确的宽度。

我有一个黑客攻击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：Same question in russian.

Answer 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>