max-height固定时，CSS自动列计数 [英] CSS auto column-count when max-height is fixed

问题描述

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

I wish to achieve a layout where an element (in my case a <ul>) expands to 2 (or more) columns when the height reaches a certain limit.

因此，例如，如果高度只能满足3个项目，而我有5个项目，则第4和第5个项目转到第二列，需要。

So for example, if the height is only enough for 3 items, and I have 5, the 4th and 5th item go to the second column, which is only created if needed.

我尝试通过将 max-height 设置为建议此处与列数列将和 column-width 设置为 auto >（我试图单独设置它们，相同的行为）。

I tried to do this by setting the max-height as suggested here with column-count and column-width set to auto via the columns (I tried setting them separately too, same behaviour).

如果在另一方面，我将 column-count 更改为固定的整数， ，但这不是动态的，因为我需要它。 （如果我只有2个元素，我不想为它们创建2列）。

If on the other hand I change the column-count to a fixed integer, it works and balances the items, but this is not dynamic as I need it. (If I have only 2 elements I don't want to create 2 columns for them).

有一种方法可以固定高度，

Is there a way to have the height fixed, and the columns automatically added when the height is not enough to fit all the items?

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;
}

<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>

推荐答案

首先，为了使 CSS列工作，您必须设置 column-width 或 column-count 。

First of all, to make CSS Columns work you have to set column-width or column-count. CSS Columns won't work if you doesn't set any of it.

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

If I understand right, you need to use column-fill property. Unfortunately, only Firefox supports it now. Check out this code snippet (Firefox only).

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;
}

<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>

您可以在自己的案例中使用 flex 。请参见示例：

I think, you could use flex in your case. See example:

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;
}

<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>

这篇关于max-height固定时，CSS自动列计数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！