Make inline-block with columns to have right width

问题

Want to make inline-block with horizonlal columns. I need each inline-block to have width as minimal number of columns to fit content.

The problem is strange columns processing by browser.

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, is likely determine width without columns and than puts columns into the area. First block has extra space for one column. Other blocks could have width of one column, but they all have different widths:

Firefox sets all blocks width to a single column and thext overflows it. I could force scrollbar on the element or any of its containers, but I can't make any of them have correct width.

I have a hack forsing Chrome to behave like Firefox, but it doesn't help me to solve the problem:

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>

Actually I need to get something like this:

PS: Same question in russian.

回答1:

In case if javascript is required, I have a simple solution that is suitable for fixed sizes of container. If sizes can dynamically change, recalculation is required (and it should reset inline styling first).

Works correctly in Chrome 51, FF 47, IE 11 and 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>

来源：https://stackoverflow.com/questions/38598799/make-inline-block-with-columns-to-have-right-width

标签

html

css

css3

google-chrome

css-multicolumn-layout