Содержимое стека 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 появляются в одной строке, последняя div перемещается в следующую строку — см. http://codepen.io/anon/pen/meGJVp .

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


css sass susy
person gummbahla    schedule 04.11.2015    source источник
comment
Возможный дубликат: stackoverflow.com/questions/20307386/masonry-layout-in -css3   -  person cimmanon    schedule 04.11.2015
comment
Общая проблема там похожая, но моя проблема специфична для Susy.   -  person gummbahla    schedule 05.11.2015
comment
У Susy нет волшебных способностей, в конце концов она должна компилироваться в CSS. Вы не можете получить то, что хотите, без изменения разметки.   -  person cimmanon    schedule 05.11.2015

Ответы (1)


arrow_upward
1
arrow_downward

Если вы хотите, чтобы элемент располагался под первым элементом в сетке, единственный способ — вложить его в тот же столбец:

<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

person Alex    schedule 04.11.2015