与Susy堆栈内容每

问题描述：

柱

我具有基于超对称网格的网页，与内容是这样的：与Susy堆栈内容每

<div class="container"> 
    <div class="column-gallery-item"> 
    <p>Who's down there? Can't see!</p> 
    </div> 
    <div class="column-gallery-item">  
    <p>Lots<br>and lots<br>and lots<br>of content</p>  
    </div> 
    <div class="column-gallery-item"> 
    <p>Not much here</p> 
    </div> 

    <div class="column-gallery-item">  
    <p>I want to move up!</p>  
    </div> 
</div>

每个div跨越12列网格的4列。前三div小号出现在一行中，最后div移动到下一行 - 看http://codepen.io/anon/pen/meGJVp。

现在我需要的最后一个div拉升，正下方的第一个。我该怎么做？

可能重复：HTTP： //*.com/questions/20307386/masonry-layout-in-css3 – cimmanon

普遍的问题有相似，但我的问题是具体到与Susy。 – gummbahla

与Susy没有魔力，它编译到CSS到底。在不修改标记的情况下，你无法得到你想要的东西。 – cimmanon

答

如果你想要的项目堆放在网格中的第一项，那么唯一的办法就是窝它在同一列下：

<div class="column-gallery-item-stacked"> 
<div class="nested-column-gallery-item"> 
    <p>Who's down there? Can't see!</p> 
</div> 
<div class="nested-column-gallery-item">  
    <p>I want to move up!</p>  
</div> 
</div>

在这里看到：http://codepen.io/anon/pen/QjVjMK

相关推荐