Question

我希望实现一种布局，其中当高度达到某个限制时，元素（在我的情况下为<ul>）会扩展为2（或更多）列。

因此，例如，如果高度仅适用于3个项目，而我有5个，则第4个和第5个项目将转到第二个列，仅在需要时创建。

我尝试将max-height设置为column-count，column-width auto，columns设置为column-count，ul#list { font-family: sans-serif; list-style: none; background: #dddddd; max-height: 200px; columns: auto auto; -webkit-columns: auto auto; -moz-columns: auto auto; /** This works, but fixes the columns to 2, which is not what I want. columns: 2 auto; -webkit-columns: 2 auto; -moz-columns: 2 auto; */ column-gap: 10px; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-rule: 1px solid black; -webkit-column-rule: 1px solid rgba(100, 30, 30, 0.4); -moz-column-rule: 1px solid rgba(100, 30, 30, 0.4); } li { height: 20px; padding: 2px; }（{1}}我也试过单独设置它们，相同的行为）。

另一方面，如果我将<div id="outer"> <ul id="list"> <li>Item #1</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> <li>Item #9</li> <li>Item #10</li> <li>Item #11</li> <li>Item #12</li> </ul> </div>更改为固定的整数，它会工作并平衡项目，但这不是动态的，因为我需要它。（如果我只有2个元素，我不想为它们创建2列。）

有没有办法让高度固定，当高度不足以容纳所有物品时，会自动添加列？

＆＃13;

 url(r'^stripe/', include('djstripe.urls', namespace="djstripe")),

＆＃13;

localhost:5000/stripe/

＆＃13;

Answer 1

首先，要使 CSS列正常工作，您必须设置column-width或column-count。如果您没有设置其中的任何内容，CSS列将无法工作。

如果我理解正确，您需要使用column-fill属性。不幸的是，现在只有Firefox支持它。请查看此code snippet（仅限Firefox ）。

＆＃13;

ul#list {
    font-family: sans-serif;
    list-style: none;
    background: #dddddd;
    max-height: 200px;

    /* Works only in Firefox! */
    -moz-columns: 100px auto;
    -moz-column-gap: 10px;
    -moz-column-rule: 1px solid rgba(100, 30, 30, 0.4);
    -moz-column-fill: auto;
}

li {
    height: 20px;
    padding: 2px;
}

＆＃13;

<div id="outer">
    <ul id="list">
        <li>Item #1</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>
        <li>Item #9</li>
        <li>Item #10</li>
        <li>Item #11</li>
        <li>Item #12</li>
    </ul>
</div>

＆＃13;

我认为，您可以在案例中使用flex。见example：

＆＃13;

ul#list {
    font-family: sans-serif;
    list-style: none;
    background: #dddddd;
    height: 200px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
}

li {
    height: 20px;
    padding: 2px;
}

＆＃13;

<div id="outer">
    <ul id="list">
        <li>Item #1</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>
        <li>Item #9</li>
        <li>Item #10</li>
        <li>Item #11</li>
        <li>Item #12</li>
    </ul>
</div>

＆＃13;

固定max-height时的CSS自动列数

1 个答案: