请考虑以下HTML:

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

和以下CSS:

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

目前,Firefox目前的渲染类似于以下内容:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

请注意,第四个项目在第二列和第三列之间分开.我该如何预防呢？

所需的渲染可能看起来更像:

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

要么

• Number one    • Number three        • Number …

使用以下HTML,将列表显示为两列的最简单方法是什么？

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

期望的显示:

A B
C D
E

该解决方案需要能够在Internet Explorer上运行.

我正在构建一个以多列格式呈现给用户的菜单系统.CSS3中的列数属性让我获得了90%的优势,但我在Chrome下的对齐方面遇到了困难.

菜单相对简单:

• 由列计数属性划分为多列的无序列表
• 列应按顺序填充,因此列填充:auto
• 菜单项表示为列表项
• 每个列表项都有一个可点击的锚标记,通过display:block完全扩展

我所拥有的对齐问题最明显,每个列表项都有一个顶部边框和一些背景颜色.在Firefox中,列表项始终在每列中干净地对齐,从不会流入上一列/下一列.在Chrome中,对齐是一个废话,随着列表项的数量和任何填充/边距属性而变化.

我在这里发布了一个简单测试用例的代码:http://pastebin.com/Ede3JwdG

问题应该立即显而易见:在Chrome中,第二列中的第一个列表项会回流到第一列.当您删除列表项(单击它们)时,您可以看到对齐进一步分解.

我已经尝试调整列表项的填充/边距无济于事:Chrome似乎对于如何在多列布局中流动内容有一个有缺陷的算法.

我没有完全放弃列数(主要是手动生成/ Columnizer /等)的主要原因是菜单系统还涉及跨多个子菜单的拖放功能,并且菜单数据已经布局作为一个基于列表的内聚层次结构,可以实现干净的代码.

有没有办法解决Chrome中的对齐问题,或者我现在应该放弃列数？

添加:

• jsFiddle原型:http://jsfiddle.net/VXsAU/
• JS Bin原型:http://jsbin.com/ebode5/

所以我有这样的CSS:

#blogPosts{
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%; 
}

这样可以完美地创建3列但是当我获得另一行时,顺序似乎是垂直的,如:

1,3,5
2,4,6

而不是我想要的:

1,2,3
4,5,6

重要!

我需要的另一个重要属性是,每个帖子之间必须有一个固定的边距.因此,例如,如果您查看上面的表格,如果2长度超过1,则顶部4将从y下方开始,而不是:height of 2+ y.

HTML是这样的:

<div id="blogPosts">
    <div class="blog">Content</div>
    <div class="blog">Content</div>
    ...
</div>

我该怎么做才能解决这个问题？

我很高兴任何解决方案,甚至包括javascript/jquery

这是我追求的事情

假设我有一个div包含一组元素(div)的元素,它们可能具有不同的高度,但它们都具有相同的宽度.

我目前用同位素+砌体实现了这一点,但由于一些浏览器已经支持CSS3多列,我希望为这些浏览器提供一个唯一的CSS解决方案,其余的则回到Javascript.

这是我一直在尝试的CSS:

.div-of-boxes {
  -webkit-column-count: 3;
  -webkit-column-gap:   10px;
  -moz-column-count:    3;
  -moz-column-gap:      10px;
  column-count:         3;
  column-gap:           10px;
}

然而,这使得元素的流动是自上而下的左右.我想要一个左右自上而下的流程.这是我想要的一个例子:

1 2 3
4 5 6
7 8 9

但这就是我得到的:

1 4 7
2 5 8
3 6 9

在Flow多列元素中,在自上而下之前左右会出现类似的问题,但是我对答案不满意,并且它不适用于不同高度的元素.这对CSS列来说是否可行,或者它是一个限制？

我想创建一个这样的多列列表:https: //jsfiddle.net/37dfwf4u/

为每列使用不同的列表时没问题:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

ul {
    display:inline-block;
}

但是,这可以通过连续列表和纯CSS来完成,以便CSS自动排列列吗？例如,使用我还不熟悉的flex布局？

当column-count在包装器中使用,并且包装器中的容器已经border-radius应用,并且容器中的内容溢出时,除了第一个列之外,内容完全消失在所有列中.

这是我的例子:https://jsfiddle.net/f4nd7tta/
红色半圆只在第一列中可见,为什么？

#main_wrap{
    width:100%;
    border:solid 1px black;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
#main_wrap > div{
    border-radius:5px;
    overflow:hidden;
    position:relative;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    width:70%;
    height:300px;
    border:solid 2px grey;
    margin:2px;
}
#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
}

<div id="main_wrap">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

这是我的代码:

.column {
    column-count: 4;
    column-gap: 10px;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
}

<div class="column">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
    <div class="inner">12</div>
</div>

其结果是:
1 4 7 10
2 5 8 11
3 6 9 12

我想要的是:
1 2 3 4
5 6 7 8
9 10 11 12

那可能吗？我该怎么做？

我有一段很大的文本流入CSS多列布局,例如,使用CSS hypening扩展两列,三列或四列.在某些时候,列的文本之一需要提前结束,以便允许段落的其余部分从第二列的顶部开始.

有没有办法我们可以简单地设置一个<column-break>来启动下一列顶部的其余文本？

目前我正在填充列(需要使用列分隔符)和大量的<br>s来延长HTML中的列以实现效果.

此外,每当任何一个列中的某些内容发生变化时,<br>填充量就会缩短,需要重新评估.

#multicolumn{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    
}

<div id="multicolumn">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
<br>
<br>
<br>
<br>
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel …

有没有办法利用Bootstrap 4配备的flexbox网格创建砌体列布局？在我看来,所有的列都是相同的高度.