如何使用 css 列将列宽调整为内容大小？答案

【问题标题】：How to adjust column width to content size using css columns?如何使用 css 列将列宽调整为内容大小？
【发布时间】：2017-06-08 09:10:33
【问题描述】：

我正在使用 css 列（不是表格）来创建一个跨越 3 列的列表，如下所示：

HTML

<ul>
  <li>- Item 1 - this is the item's name here.</li>
  <li>- Item 2</li>
  <li>- Item 3</li>
  <li>- Item 4</li>
  <li>- Item 5</li>
  <li>- Item 6</li>
  <li>- Item 7</li>
  <li>- Item 8</li>
</ul>

CSS

ul {
  column-count: 3;
  max-width: 40rem;
}

显示方式

但是，所有列的宽度都相同，这会导致它们之间的间距不同。如何调整 css 列以获得这样的结果，其中每列的宽度取决于内容？

我想要达到的目标：

谢谢！

编辑：我应该提到我需要使用 CSS 列，因为这些项目列表是通过 CMS 动态生成的，所以如果可能的话，我想找到一个纯 CSS 解决方案以避免不得不引入 Javascript 来操作 DOM。谢谢你。

【问题讨论】：

我刚刚发现这可能已经在这里stackoverflow.com/questions/23794713/…得到了回答，使用flex-growth和flex-shrink样式
您无法通过列实现这一点。 CSS 列是为在相等列之间流动的内容而设计的。

标签： css column-count

【解决方案1】：

仅供参考，因为它目前只是实验性的：

这可以在few browsers中测试，

另见http://caniuse.com/#search=grid

教程等https://css-tricks.com/snippets/css/complete-guide-grid/

所以display:grid 总有一天会有所帮助：但是，布局仍然是每行喷射行

ul {
  padding: 1em ;
  margin: 2em;
  border: solid 1px;
  list-style-type: none;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 0 2em;
}

<ul>
  <li>- Item 1 - this is the item's name here.</li>
  <li>- Item 2</li>
  <li>- Item 3</li>
  <li>- Item 4</li>
  <li>- Item 5</li>
  <li>- Item 6</li>
  <li>- Item 7</li>
  <li>- Item 8</li>
</ul>

如果您使用服务器端的例程或 javascript 来计算您的项目，那么您可能会强制将它们按列喷列：（通过 js / jQuery 的示例：http://codepen.io/gc-nomade/pen/BpZZQW播放和添加/删除 lis )

ul {
  padding: 1em 1em 1em 4em;
  margin: 2em;
  border: solid 1px;
  list-style-type: none;
  display: grid;
  grid-gap: 0 2em;
  padding:1em ;
  grid-template-columns: 0 auto auto 1fr;/* last one set to use all room left */
  grid-auto-flow: column;
}

/* span a first-element throgh all rows , to be injected and updated from server side or via javascript on the fly */
ul:before {
  content: '';
  grid-column: 1;
  /* short hand : grid-row:1/4;*/
  grid-row-start: 1;
  grid-row-end: 4;/* value to updated to match row numbers + 1 */
}

<ul>
  <li>- Item 1 - this is the item's name here.</li>
  <li>- Item 2</li>
  <li>- Item 3</li>
  <li>- Item 4</li>
  <li>- Item 5</li>
  <li>- Item 6</li>
  <li>- Item 7</li>
  <li>- Item 8</li>
</ul>

【讨论】：