CSS列计数 - 更改顺序

Question

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

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

结果应该是这样的：

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

Answer 1

为什么在需要基于行的订单时使用列？看起来像the flex model的工作。无需更改HTML即可：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您不需要在CSS中使用column show。请改用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/

Answer 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 并使用 {{1} } 和 parent.scrollTop = parent.scrollHeight - columns.offsetHeight