Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.9k views
in Technique[技术] by (71.8m points)

请问column-count瀑布流如何实现左右顺序?

HTML:

<div class="wrap">
        <div class="item" style="height: 200px;">11</div>
        <div class="item" style="height: 100px;">22</div>
        <div class="item" style="height: 150px;">33</div>
        <div class="item" style="height: 70px;">44</div>
    </div>

CSS:

<style>
        .wrap{
            column-count: 2;
        }
        .item{
            background-color: #ccc;
            margin-bottom: 10px;
            page-break-inside: avoid;
        }
    </style>

效果:
image.png
目前的效果是左1,左2,右3,右4,

请问怎么才能改变所显示的顺序,变成左1,右2,左3,右4 这种顺序啊?
image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

column-count 的初衷是用来给大段文本分列的,报纸那种。

你这种明显用 flex 布局更好啊,order 还可以自己定


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...