CSS 列数 - 更改顺序答案

【问题标题】：CSS Column Count - Change orderCSS 列数 - 更改顺序
【发布时间】：2021-02-18 06:25:24
【问题描述】：

我想在这里更改列的顺序：

#container {
    position: relative;
    width: 600px;
}

#column-wrapper {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20px; 
    -moz-column-gap: 20px;
    column-gap: 20px;
}

#column-wrapper .column {
    display: inline-block;
    width: 100%;
    padding: 20px 0;
    margin-bottom: 20px;
    background-color: green;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

<div id="container">

    <div id="column-wrapper">
        
        <div class="column">
            <span>1</span>
        </div>
        
        <div class="column">
            <span>2</span>
        </div>
        
        <div class="column">
            <span>3</span>
        </div>
        
        <div class="column">
            <span>4</span>
        </div>
        
         <div class="column">
            <span>5</span>
        </div>
        
         <div class="column">
            <span>6</span>
        </div>
        
    </div>
    
</div>

结果应该是这样的：

有没有人知道一个简单的解决方案？

【问题讨论】：

您不能更改 html 标记？ :O
OP，我编辑了您的问题以使用代码 sn-p，因为相关代码应该在问题中。下次请自己做。
是否需要使用列数？为什么不让它们浮起来？

标签： html css

【解决方案1】：

当您想要基于行的顺序时，为什么要使用列？看起来像是the flex model 的工作。在不更改 HTML 的情况下，您可以这样做：

#container {
    position: relative;
    width: 600px;
}

#column-wrapper {
    display: flex;
    flex-wrap: wrap
}

#column-wrapper .column {
    display: inline-block;
    width: calc(30% - 20px);
    padding: 20px 0;
    margin: 20px;
    background-color: green;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

<div id="container">

    <div id="column-wrapper">
        
        <div class="column">
            <span>1</span>
        </div>
        
        <div class="column">
            <span>2</span>
        </div>
        
        <div class="column">
            <span>3</span>
        </div>
        
        <div class="column">
            <span>4</span>
        </div>
        
         <div class="column">
            <span>5</span>
        </div>
        
         <div class="column">
            <span>6</span>
        </div>
        
    </div>
    
</div>

【讨论】：

非常感谢这个解决方案。正是我想要的。
当弹性项目（“列”）以这种方式对齐时，即使它们具有不同的高度，有没有办法让它工作？！ :)

【解决方案2】：

您无需在 CSS 中使用 column 显示。改用float，这是自然的文档流。

.column {float: left; width: 140px;}
.column:nth-child(3n+2) {margin: 0 20px;}
.column:nth-child(3) ~ .column {margin-top: 20px;}

http://jsfiddle.net/70nk1a1n/1/

【讨论】：

在这个例子中是的。但在我的项目中，#container 的宽度是灵活的。
@ironman: 所以你可以在宽度和边距/填充中使用% :-) 一切皆有可能，但是当你需要从左到右显示块时（自然文档流），它是非-sense 使用柱状网格来做到这一点。
好吧，没错 :) 但是如果我有 100 行，边距有问题吗？
@ironman：真的不知道，你有什么:-)。它适用于许多行，我刚刚将px 更改为%。 - jsfiddle.net/70nk1a1n/2
糟糕，对不起。所以这是一个很好的解决方案。什么解决方案更好：D

【解决方案3】：

这很有趣，旋转页面和内容。下面的编辑描述了 columnCount 的一个陷阱。真正的解决方案如下

<div ref={this.columns} style={{
 columnCount:Math.round(window.innerWidth*1 / 300)/1,
 transform: "rotate(180deg)"//rotate page, same as scale(-1,-1)
}}>
<div style={{
 transform: "scale(-1,-1)",//flip && reverse column content (parent)
 width:"100%,//so children are not lost when scrolled offscreen y
 breakInside:"none"// "" not pushed to next column when ""
}}></div>
</div>

编辑：这似乎打破了columnCount 在列内容上维护width:100% and columnGap:"1px" or something 的潜规则，在我的情况下丢失了backgroundColor，对于其他一些SO columnCount 问题，当滚动到屏幕外时媒体会丢失。我不相信我可以让组件先渲染旋转，然后应用 columnCount 来维护它，所以我 90% 确定唯一的解决方案是反转你的 sort 并使用 parent.scrollTop = parent.scrollHeight - columns.offsetHeight 和 parent.scrollLeft = parent.scrollWidth - columns.offsetWidth

【讨论】：