这是我的问题,我有一个 3 列设计,类似于 Pinterest,但是,我不喜欢它们的显示顺序。
查看此演示:My Demo
如你所见,文章是这样显示的
1 3 5
2 4 6
我希望它们像这样显示:
1 2 3
4 5 6
我知道我可以通过更改标记来实现它,但问题是所有内容都将从数据库中一个接一个地调用,所以一篇接一篇,因此需要以与标记中相同的方式进行排序,只是在页面上显示不同:
HTML
<div class="page-wrap main">
<div class="grid">
<article class="box article">
<header class="clearfix">
1
</header>
</article>
<article class="box article">
<header class="clearfix">
2
</header>
</article>
<article class="box article">
<header class="clearfix">
3
</header>
</article>
<article class="box article">
<header class="clearfix">
4
</header>
</article>
<article class="box article">
<header class="clearfix">
5
</header>
</article>
<article class="box article">
<header class="clearfix">
6
</header>
</article>
</div> <!-- END .grid (Content) -->
</div> <!-- END .page-wrap (Content) -->
CSS
body {
background-color: #ebebeb;
}
.page-wrap {
width: 90%;
max-width: 1280px;
margin: 0 5%;
}
.grid {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
}
.box {
display: inline-block;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 1px;
width: 100%;
}
.article {
background-color: #ffffff;
margin-top: 20px;
}
最佳答案
你可以这样做,但你必须为每篇文章添加一个新类。这不会破坏网站的其余部分,因为您需要添加的 CSS 只会在您希望应用新布局的页面上调用它。这是一个演示 http://jsfiddle.net/kevinPHPkevin/LZgtA/
<div class="page-wrap main">
<div class="grid">
<article class="box article one">
<header class="clearfix">
1
</header>
</article>
<article class="box article two">
<header class="clearfix">
2
</header>
</article>
<article class="box article three">
<header class="clearfix">
3
</header>
</article>
<article class="box article four">
<header class="clearfix">
4
</header>
</article>
<article class="box article five">
<header class="clearfix">
5
</header>
</article>
<article class="box article six">
<header class="clearfix">
6
</header>
</article>
</div> <!-- END .grid (Content) -->
关于html - 重新排列页面上的默认列(-webkit-column,-moz-column)顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15817427/