Как я могу вытащить вложенный элемент сетки на 1 столбец?

Учитывая следующую структуру HTML:

<div id="a">
  A
  <div id="b">
    B
  </div>
</div>

...и следующий Singularity SCSS:

$grids: 6;
$gutters: .1;
$gutter-styles: 'split';

div#a {
  @include grid-span(5,2)
}

div#b {
  // @todo: position and width.
}

... Я хочу создать такой макет, где B вытягивается влево из своего контейнера A на 1 столбец и охватывает 2 крайних левых столбца:

  -----------
  |  A      |
-----       |
| B |       |
-----       |
  |         |
  -----------

Конечно, я могу посчитать сам, но я чувствую, что это должно быть возможно с помощью миксинов и функций Singularity (в конце концов, именно поэтому я использую сетку :-)) Однако я не могу получить размеры и позиционирование. из Б правильно.

Какие миксины и/или функции Singularity я использую для установки ширины (промежутка столбца) и положения (отрицательное поле слева) div#b?


singularitygs
person marcvangend    schedule 22.09.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ответ сильно зависит от того, какой поток вы хотите внутри блока #A.

Поддержание потока

Самое простое, что можно сделать, это вытащить блок #B наружу с отрицательным запасом.

Для этого вам не следует использовать миксин grid-span(). Вместо этого используйте свойства CSS width и margin. Значения этих свойств можно вычислить с помощью вспомогательных функций column-span() и gutter-span().

Эти вспомогательные функции принимают аргумент $grid, который обозначает контекст сетки. Вы должны предоставить контекст сетки блока #A, который на один столбец меньше, чем основная сетка.

$grids: 6
$gutters: .1
$gutter-styles: 'split'

$a-columns-width: 5

#a
  +grid-span($a-columns-width,2)
  overflow: visible

#b
  width: column-span(2, 1, $grid: $a-columns-width)
  margin-left: - column-span(1, 1, $grid: $a-columns-width) - gutter-span($grid: $a-columns-width)

Пожалуйста, посмотрите демо: http://sassbin.com/gist/6676220/

Удаление #B из потока

Но блок #B не выводится из потока. Он по-прежнему занимает всю ширину блока #A, поэтому справа от #B ничего нельзя поместить.

Если вам нужно поместить какой-либо текст и прочее справа от #B, вам следует рассмотреть возможность использования другого подхода. Мне приходит на ум абсолютное позиционирование.

Решение будет сложнее. Если вы хотите, чтобы я придумал один, пожалуйста, объясните вашу задачу более подробно. Предоставьте графический шаблон, возможно.

Вам также придется использовать некоторые хитрости, чтобы содержимое #A не покрывалось #B.

Плоская структура HTML упрощает работу

Кроме того, зачем вообще нужна вложенная структура (#B внутри #A)? Если вы сделаете структуру плоской, расположение блоков станет простым:

#a
  +grid-span(5,2)

#b
  +grid-span(2,1)
  margin-top: 4em

Демонстрация: http://sassbin.com/gist/6676193/

Тем не менее, контент #A, появляющийся под #B, по-прежнему является проблемой.

PS Если вас не устраивает ответ, поясните задачу подробнее и предоставьте графическую иллюстрацию нужной страницы со всем содержимым #A.

person Andrey Mikhaylov - lolmaus    schedule 23.09.2013
comment
Большое спасибо за ваш подробный ответ. Чтобы ответить на ваш вопрос: мне нужна вложенная структура, потому что редакторы смогут добавить цитату (B) в основной текст (A). Первое решение, сохраняющее #b в потоке, (почти) именно то, что мне нужно. Однако я хочу, чтобы содержимое #a обтекало #b. Основываясь на вашей первой демонстрации, я смог создать улучшенную версию, которая избавляет от неиспользуемого пространства. Все, что нужно, это дополнительные float:left и margin-right: gutter-span($grid: $a-columns-width) на #b... и все отлично! - person marcvangend; 24.09.2013

arrow_upward
1
arrow_downward

Что-то вроде этого похоже на то, что вы ищете: http://sassmeister.com/gist/6663743

person scottkellum    schedule 22.09.2013
comment
Спасибо, это отличный трюк, чтобы использовать число меньше 1 для аргумента местоположения. Я не знал, что ты можешь это сделать. К сожалению, это не решает проблему полностью. Ширина A не включает желоба, поэтому она меньше, чем просто 5/6 * 100%. Ширина и левое поле B выражаются в процентах от его родителя. В результате ширина B меньше, чем должна быть, и его положение недостаточно далеко влево. Ваш метод идеально выравнивается, когда вы используете $gutters: 0;, но это не вариант для дизайна, который я собираюсь реализовать. - person marcvangend; 23.09.2013
comment
Ах хорошо. Похоже, нам придется немного поработать над тем, чтобы ядро ​​Singularity лучше поддерживало это. В этом случае будет полезна простая возможность запросить процент желоба. - person scottkellum; 24.09.2013