CSS列布局隐藏空列

I've done a few things with css columns and I really like them, but today I stumbled into a problem for which I just won't find a solution:

我已经用css列做了一些事情,我真的很喜欢它们,但今天我偶然发现了一个问题,我找不到解决方案:

I have a page with multiple lists. These lists have dynamic contents and open up in small popups. The old behaviour was, that the list contents have been shown in a single column (normal HTML <ul>). The new behaviour should be that they are displayed in up to 4 columns. So I have extended my CSS with ul { column-count: 4; }. This works pretty nice for lists with many entries.

我有一个包含多个列表的页面。这些列表具有动态内容,并在小弹出窗口中打开。旧的行为是,列表内容已显示在单个列中(普通HTML

Now to my problem: sometimes there are lists with less then 4 entries. If that's the case, the popups for the lists still span 4 columns, with only 2 columns filled. So the popup for the less-filled list is still as wide as a popup with a full-filled list. For example:

现在我的问题是:有时会有少于4个条目的列表。如果是这种情况,列表的弹出窗口仍然会跨越4列,只填充2列。因此,填充较少的列表的弹出窗口仍然与具有完整填充列表的弹出窗口一样宽。例如:

ul {
  background-color: lime;
  list-style: none;
  column-count: 4;
}

<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>

<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>

My question now is: How do I hide those empty columns? I want a popup with a less filled list (no. of entries < 4) to be less wide then a popup with a full-filled list. I'd like to find a CSS-only solution, as I didn't intend to count the entries and add extra classes to decrease the column-count.

我现在的问题是:我如何隐藏那些空列?我想要一个填充较少的列表(条目数<4)的弹出窗口要小于带有完整填充列表的弹出窗口。我想找到一个只有CSS的解决方案,因为我不打算计算条目并添加额外的类来减少列数。

The order in which the elements are displayed is important: top-down and then left-right.

显示元素的顺序很重要:自上而下,然后是左右。

I've tried using flexbox, but there I have to set a fixed width for the container, which just results in the popups being too wide as well.

我尝试过使用flexbox,但是我必须为容器设置一个固定的宽度,这只会导致弹出窗口太宽。

Edit for clarification: The dotted line should be the right border for the second popup. The diagonal lines mark the empty space I need to be gone.

编辑以澄清:虚线应该是第二个弹出窗口的右边框。对角线标出了我需要消失的空白空间。

Edit further approaches: Another approach posted by user 'Gobbin' as answer, is to use flex. But as I mentioned, I'd have to set some fixed width. Here it is a max-width for the list itself, so that wrapping works and a fixed width for the list elements. I don't want to have either. Also this approach lists the items from left to right and then from top to bottom, which is also not what I need:

编辑更多方法:用户'Gobbin'发布的另一种方法是使用flex。但正如我所提到的,我必须设置一些固定的宽度。这里是列表本身的最大宽度,因此包装工作和列表元素的固定宽度。我也不想要。此方法也会从左到右,然后从上到下列出项目,这也不是我需要的:

ul {
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 16em;
  float: left;
  clear: both;
}

li {
  background-color: lime;
  width: 4em;
}

<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>

<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>

2 个解决方案

#1

Maybe this is an option for you, although the columns are spread across the available width.

也许这是一个选项,尽管列遍布可用宽度。

var maxColumns = 4;
$("ul").each(function() {
  var numColumns = $(this).find("li").length;
  $(this).css("column-count", numColumns);
  $(this).css("width", 25*numColumns + "%");
});

ul {
  background-color: lime;
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>entry 1</li>
  <li>entry 2</li>
  <li>entry 3</li>
  <li>entry 4</li>
</ul>

<ul>
  <li>entry 1</li>
  <li>entry 2</li>
</ul>

#2

I think this is your desired layout. Edited my answer as the list items still had margins.

我认为这是你想要的布局。编辑我的答案,因为列表项仍然有利润。

ul {
  list-style: none;
    display: inline-flex;
    float: left;
    clear: both;
}
li{
   background-color: lime;
   width: 100%;
   display: inline;
}

<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>

<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>

#1