Singularity.gs div фон не отображается

Я создаю сайт с использованием uniqueity.gs, который я довольно новичок. У меня возникли проблемы с предоставлением div фонового цвета, это моя структура html:Singularity.gs div фон не отображается

http://oi44.tinypic.com/205xt1i.jpg, «зеленая» часть - моя о div.

<div class="about"> 
    <div class="photo"> 
     <img class="photoBorder" src="images/foto_jeroen.png" alt=""/> 
    </div> 
    <div class="text"> 
     <h1>Hello I'm Jeroen Druw&eacute</h1> 
     <p>...</p> 
    </div> 
</div>

Для достижения этой цели аффект должен установить высоту для DIV:

@include breakpoint(70em) { 
.about { 
    height: 340px; //This property will set the height of the div 
} 

.about .photo { 
    padding: 1em; 
    @include grid-span(2, 4); 
} 

.about .text { 
    padding-top: 7em; 
    padding-left: 1em; 
    display: inline; 
    @include grid-span(4, 6); 
}}

Если удалить «высота: 340px» фон не будет нарисован:

http://oi39.tinypic.com/2s16ezl.jpg (только моя тонкая граница)

Есть ли способ позволить div обернуть свою высоту вокруг своего содержимого (.photo, .text)?

Примечания: если я удалить @include сетки-диапазон для .photo и .text фоновых шоу, но я не хочу потерять функциональность сингулярности

Спасибо заранее!

источник

2013-10-09 Jdruwe

Не охватывайте контейнер.

Проблемы вы испытываете происходит потому, что Singularity столбцов float ред и плавали элементы взяты из Потока. Это означает, что контейнер больше не «знает» о ваших столбцах, поэтому он ведет себя как пустой элемент.

Существует свойство, называемое clear, которое позиционирует элемент под любым находящимся рядом плавающим элементом. Если вы создаете дополнительный элемент внутри контейнера после того, как все ваши колонны, clear: both; правило применяется к нему будет толкать его ниже плавали колонн, эффективно растягивая контейнер достигает столбцов:

<div class="about"> 
    <div class="photo"> 
     <img class="photoBorder" src="images/foto_jeroen.png" alt=""/> 
    </div> 
    <div class="text"> 
     <h1>Hello I'm Jeroen Druw&eacute</h1> 
     <p>...</p> 
    </div> 
    <div class=clear></div> 
</div>

.clear { clear: both; }

Но не добавляйте лишний элемент, это не семантично. Вместо этого используйте псевдоэлемент , который отображается в конце содержимого элемента . Использование :after подобно созданию пустого элемента в конце содержимого элемента.

.about { 
    &:after { 
    content: ''; // This is required for the pseudo-element to exist 
    display: block; // Default display is inline, have to change that for `clear` to work. 
    clear: both; // Yay, magic! 
    } 
}

Эта техника называется "clearfix".

Это можно сделать еще проще с расширением в многоцелевой Toolkit из команды Sass, авторы Singularity:

@import 'toolkit'; 
.about { @extend %toolkit-micro; }

%toolkit-micro расширяемый has некоторые дополнительные правила, которые делает clearfix трюк работу в старых браузерах. Существует также расширение %clearfix-legacy, которое работает даже в древних браузерах.

источник

2013-10-10 17:29:47

Эй, спасибо за ваш комментарий! Я нашел другой путь раньше, чтобы исправить это, @ включить сетку (12, 1) в div «about». Какое решение лучше? – Jdruwe

Clearfixing чище. Ваше решение плавает, контейнер snd ограничивает его размер. Кроме того, вам понадобится контейнер контейнера clearfix. –

Спасибо, мне очень помогли! – Jdruwe

Я исправил его. Забыл добавить сетку @include (12, 1); для моего. около

источник

2013-10-10 10:04:01 Jdruwe

Singularity.gs div фон не отображается

ответ

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