Как определить элементы, одинаковые по ширине в строке с изолированным диапазоном

Question

Есть еще одна вещь, которой еще не удалось выполнить с Singularity. На данный момент я пытаюсь сделать переход с поплавка на стиль вывода изоляции и использовать сетку и изоляцию. Но есть одна картина, которую я не могу воспроизвести. Не уверен, есть ли более элегантный способ. Для вывода float я использовал следующие настройки, например,

<div class="floater"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

@import 'compass'; 
@import 'singularitygs'; 
$grids: 16; 
$gutters:0.25; 
$output: 'float'; 

.floater div 
{ 
    background-color:red; 
    height:10em; 
    @include float-span(4); 
    &:nth-child(4n) { 
     @include float-span(4, 'last'); 
    } 
} 

Приводит к 4-мя коробкам, одинаковым по ширине, расположенным рядом друг с другом. Но как сделать то же самое с выходом изоляции/изоляции. Если я пытаюсь

<div class="isolator"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

@import 'compass'; 
@import 'singularitygs'; 
$grids: 16; 
$gutters:0.25; 
$output: 'isolation'; 

.isolator div 
{ 
    background-blue; 
    height:10em; 
    @include isolation-span(4, 1, 'right', $gutter: .25); 
    &:nth-child(4n) { 
     @include isolation-span(4, 13, 'right', $gutter: .25); 
    } 
} 

Должен ли я писать для каждой колонки «» а я-го ребенок и изоляция-оболочка включают (Потому что с п-м-ребенком из примера поплавкового показан только первый и последний ящик) ? Или есть более короткий способ, как с приведенным выше примером float? С наилучшими пожеланиями Ralf

Answer 1

Вам нужно записать каждый товар. Метод вывода isolation незаметно помещает элемент в позицию столбца в сетке. Технически говоря, то, что вы делаете с методом вывода float, на самом деле является побочным продуктом счастливой сингулярности, который случается с объединенной сеткой float и symmetric и будет меняться, если вы измените одну из этих переменных.

Что здесь происходит, так это то, что с симметричной сеткой, поскольку каждый элемент имеет одинаковую ширину, вы можете поменять один столбец на другой. С float, так получилось, что в каждом столбце вы помещаете окурки против элемента влево (для ltr). Эти два свойства объединяются, чтобы вы могли определить span в float, всегда начиная с 1-го столбца, но отображаться в любой позиции, потому что вы можете обменивать столбцы в симметричных сетках. Затем вы воспользуетесь этим, чтобы собрать их вместе. Такое поведение на самом деле является основным различием между ментальной моделью выходного стиля и ментальной моделью выходного стиля isolation (которая, как указано выше, незаметно помещает элемент в позицию столбца).