使inline-block与列具有正确的宽度

本文介绍了使inline-block与列具有正确的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

希望使用horizonlal列创建 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。专业销售deseruisse广告。 Vix cu integre fuisset insolens。 Quo perfecto pericula ex。 Te nam tritani honestatis，eam integre virtute ut。< / p> < p> Cum a autem affert laoreet，ea ius falli impedit ocurreret。没有双重完美的唇舌，te mea aliquid graecis，te有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。 < / p>< / div>< div> < p> Lorem ipsum dolor sit amet，an nec posse homero accumsan。专业销售deseruisse广告。 Vix cu integre fuisset insolens。 Quo perfecto pericula ex。 < / p>< / div>< div> < / div>< div>< p>< p> < p> Lorem ipsum< / p>< / div>

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

Firefox 将所有块宽度设置为单个列，并且该文件溢出。我可以强制滚动条上的元素或任何容器，但我不能让它们有任何正确的宽度。

PS：

解决方案

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

在Chrome 51，FF 47，IE 11和Opera 12中可以正常工作。 / p>

  var divs = document.querySelectorAll（div）; for = 0; q< divs.length; ++ q）{//divs[q].style.width =; // refresh 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。专业销售deseruisse广告。 Vix cu integre fuisset insolens。 Quo perfecto pericula ex。 Te nam tritani honestatis，eam integre virtute ut。< / p> < p> Cum a autem affert laoreet，ea ius falli impedit ocurreret。没有双重完美的唇舌，te mea aliquid graecis，te有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。 < / p>< / div>< div> < p> Lorem ipsum dolor sit amet，an nec posse homero accumsan。专业销售deseruisse广告。 Vix cu integre fuisset insolens。 Quo perfecto pericula ex。 < / p>< / div>< div> < / div>< div>< p>< p> < p> Lorem ipsum< / p>< / div>

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.

解决方案

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>

这篇关于使inline-block与列具有正确的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！