CSS列数 - 更改顺序

6
我想在这里更改列的顺序:

#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 - odedta
OP,我编辑了你的问题,使用了代码片段,因为相关的代码应该在问题中。下次请自己操作。 - Denys Séguret
需要使用 column-count 吗?为什么不浮动它们呢? - Felix A J
3个回答

7
为什么要使用列,而不是行来进行排序?看起来需要使用flex模型。不改变你的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>


非常感谢这个解决方案。恰好是我正在寻找的内容。 - Nepo Znat
2
有没有办法让这个在 flex-items(“column”)以这种方式对齐时工作,即使它们具有不同的高度?! :) - Alisso

0

在 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的宽度是灵活的。 - Nepo Znat
好的,没错 :) 但是如果我有100行,边距会有问题吗? - Nepo Znat
@ironman:真的不知道你那里有什么:-)。它适用于许多行,我只是将“px”更改为“%”- http://jsfiddle.net/70nk1a1n/2/。 - pavel
抱歉,这是一个好的解决方案。那么哪个方案更好呢 :D - Nepo Znat
我来处理这个。再次感谢你的努力。 - Nepo Znat
显示剩余2条评论

0

这很有趣,旋转页面和内容。下面的编辑描述了对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>

编辑:这似乎违反了维护{{link1:width:100%columnGap:“1px”或其他内容的columnCount不成文规则}}在列内容中,我的情况下失去了backgroundColor,对于一些其他SO columnCount问题,当滚动到屏幕外时媒体会丢失。我不认为我可以使组件先呈现旋转,然后应用columnCount来维护它,所以我90%确定唯一的解决方案是颠倒您的sort并使用parent.scrollTop = parent.scrollHeight - columns.offsetHeightparent.scrollLeft = parent.scrollWidth - columns.offsetWidth


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接