Question

我有多个<ul>，我想将它们分成三列，高度相等。

＆＃13;

#list {
  column-count: 3;
  column-fill: balance;
}

#list ul {
  float: left;
}

＆＃13;

<div id="list">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

＆＃13;

此逻辑将列分为三个。但是这些专栏并不平衡。我想在所有三列中平均分配可能具有相同高度的内容。 3列不平衡。我们可以重新平衡列，所以前两列不是很长吗？有可能吗？任何帮助。

Answer 1

balance是column-fill的默认值。问题是float: left。删除它，你可以像这样写：

＆＃13;

#list {
  column-count: 3;
  -moz-column-fill: balance;
  column-fill: balance;
}

#list ul {
  margin: 0;
  display: block;
}

＆＃13;

<div id="list">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

＆＃13;

Answer 2

朋友，下面的句子中有两层逻辑。

此逻辑将列分为三个。但是这些专栏并不平衡。我想平均划分所有三列中可能具有相同高度的内容。

可以完成列中的等分：

内容明智
空间明智

如果您希望仅以空格方式更正您的给定示例（从第一列中移除丑陋的间隙），则只需在margin:0;元素处添加ul（或随意更改属性边距）。

如果你想在你的例子中纠正两个观点，那么@ ICE的答案就是王道（注意margin:0;也是这样的关键）。

将多个<ul>除以平衡列

2 个答案: