Question

我有一个包含2列的列表。我会根据需要添加元素，我想填充第一列，当它填满时，第二列。

问题是列表的高度将由其父级的高度确定（用户可以调整大小），因此我不想设置列表高度。

以下是设置列表高度的一个示例：

HTML：

<div>
<ul>
<li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li>
<li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li>
<li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li>
<li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li>
<li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>wordEnd</li>
</ul>
</div>

CSS：

ul {
  column-fill: auto;
  column-count: 2;
  max-height: 100%;
  height: 500px;
}

澄清我的问题：在这种情况下，父级是一个div，其屏幕高度减去页面标题（另一个div）的高度。所以它根据用户的分辨率而变化。

Answer 1

由于父元素可调整大小，因此它具有高度。您需要做的只是将列表的高度设置为100％。您的问题是您的解决方案：

列表的高度将由其父级的高度决定

* {
    box-sizing: border-box;
    margin: 0;
}
html, body {
     height: 100%;
 }
 header {
     height: 100px;
     background: none #eee;
 }
 ul {
     margin: 0;
     column-fill: auto;
     column-count: 2;
     -moz-column-fill: auto;
     -moz-column-count: 2;
     height: calc(100vh - 100px);
 }

<header>
    <h1>Header</h1>
</header>
<div>
    <ul>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
    </ul>
</div>

Updated Fiddle here

编辑：已更新至上次要求。

如何划分2列中的列表项，在第二列之前填充第一列，而不设置ul高度？

1 个答案: