2015-11-04 2 views
1

У меня есть сайт, основанный на 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 охватывает 4 столбца сетки с 12 колонками. Первые три div s отображаются в одной строке, последние div перемещаются в следующий ряд - см. http://codepen.io/anon/pen/meGJVp.

Теперь мне нужен последний div для перемещения вверх, прямо под первым. Как я могу это сделать?

+0

Возможные дубликат: HTTP: //stackoverflow.com/questions/20307386/masonry-layout-in-css3 – cimmanon

+0

Общая проблема есть аналогичная, но моя проблема специфична для Susy. – gummbahla

+0

Susy не обладает магическими полномочиями, он должен скомпилировать CSS в конце. Вы не можете получить то, что хотите, без изменения разметки. – cimmanon

ответ

1

Если вы хотите деталь складывают под первым пунктом в сетке тогда единственный способ заключается в гнезде его в той же колонке:

<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

Смежные вопросы