重新排列默认列（-webkit-column，-moz-column）在页面上的顺序？ [英] re-arange default column (-webkit-column, -moz-column) order on a page?

问题描述

这里是我的问题，我有一个3列设计，类似于Pinterest，但我不喜欢他们被显示的顺序。

查看此演示：我的演示

为您可以看到这样显示的文章

  1 3 5 
 2 4 6 
  
 
 
 
我希望它们显示如下：
 code> 1 2 3 
 4 5 6 
  
我知道我可以实现通过改变标记，但问题是所有的内容将被从数据库一个接一个地调用，所以文章，所以它需要以与在标记中相同的方式排序，只是在页面上显示不同： p> 
 
 
  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 
< / head> 
< / article> 
 
< article class =box article> 
< head 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） - > 
  
 
 
Here is my problem, I have a 3 column design, similar to Pinterest however, I don't like the order in which they are being displayed.

See this demo: My Demo

as you can see articles are displayed like this
1  3  5
2  4  6
I would like them to be displayed like this:
1  2  3
4  5  6
I know I can achieve it by changing markup, but the problem is that all content will be called from database one by one, so article by article and so it need's to be ordered in a same way as it is in markup, just display differently on a page:

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

解决方案
You can do it but you will have to add a new class to each article. This will not disrupt the rest of the website as the CSS you need to add you will only call it to the pages you want the new layout to apply to. Heres a demo 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) -->
 

                        
这篇关于重新排列默认列（-webkit-column，-moz-column）在页面上的顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！