4

我正在使用 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。谢谢你。

4

1 回答 1

2

仅供参考，因为此时它只是实验性的：

这可以在少数浏览器中进行测试，

另见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 play并添加/删除 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>

于 2017-01-23T20:19:51.053 回答