Susy Сетка Проблема с остовных 6

У меня возникли некоторые вопросы, охватывающие мои 12 пунктов по 2 ряда из 6Susy Сетка Проблема с остовных 6

У меня возникли проблемы с раздела «художника». Я не уверен, что я должен использовать галерею mixin для этого или просто использовать промежутки, как я для других разделов.

http://codepen.io/anon/pen/pNjqzw

HTML:

<html> 
    <body> 
    <header> 
     <div class="container"> 
     <h1>SMEDC 2017</h1> 
     </div> 
    </header> 

    <div class="container"> 
     <div class="rooms"> 
     <h1 class="title">Rooms</h1> 
     <div class="room"></div> 
     <div class="room"></div> 
     <div class="room"></div> 
     </div> 

     <div class="packages"> 
     <h1 class="title">Packages</h1> 
     <div class="package"></div> 
     <div class="package"></div> 
     <div class="package"></div> 
     <div class="package"></div> 
     </div> 

     <div class="artists"> 
     <h1 class="title">Artists</h1> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     <div class="artist"></div> 
     </div> 
    </div> 

    <footer> 
     <div class="test">Powered by Smeazy</div> 
    </footer> 

    </body> 
</html>

SASS:

@import "susy"; 
$susy: (columns: 12, 
     gutters: 1/4, 
     global-box-sizing: border-box, 
     debug:(image:show) 
     ); 

// Colours 
$color-primary: #38a1d6; 
$color-secondary: #16f4d0; 
$color-tertiary: #fcee21; 
$color-grey: #a1acb5; 
$color-grey-light: #dce8ef; 
$color-grey-dark: #333; 

$default-font: edc_font; 

@font-face { 
    font-family: 'edc_font'; 
    src: url('../fonts/lemonmilk-webfont.woff2') format('woff2'), url('f../onts/lemonmilk-webfont.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

%clearfix { 
    &:after { 
     content: ""; 
     display: table; 
     clear: both; 
    } 
} 

header h1 { 
    font-family: $default-font; 
    text-align: center; 
    font-size: 3.5rem; 
    margin: 0; 
} 

.title { 
    font-family: $default-font; 
    text-align: center; 
    font-size: 3rem; 
    margin: 0; 
} 

.container { 
    @include container(); 
} 

header { 
    background-color: $color-primary; 
    height: auto; 
} 

.rooms { 
    .room { 
     @include span (4); 
     height: 10rem; 
     background: green; 
     &:last-child { 
      @include span (4 last); 
     } 
    } 
} 

.packages { 
    .package { 
     @include span (3); 
     height: 10rem; 
     background: red; 
     &:last-child { 
      @include span (3 last); 
     } 
    } 
} 

.artists { 
    .artist { 
     @include span (2); 
     height: 10rem; 
     background: pink; 
     &:last-child { 
      @include span (2 last); 
     } 
    } 
} 

footer { 
    background-color: $color-grey; 
    height: auto; 
    font-family: $default-font; 
    text-align: center; 
    padding: gutter(); 
}

источник

2016-11-10 626

Проблема в настоящее время является то, что :last-child выбирает последний элемент в контейнер (художник № 12), а не последние элементы в строке (# 6 & # 12). Последний-ребенок определяется деревом DOM, а не макетом.

Галерея mixin отлично поработает здесь. Он также использует селектор nth- на основе DOM, но применяет их более непосредственно. Поскольку у вас есть h1 заголовок в контейнере вместе со всеми художниками, вы должны включить опцию nth-of-type:

.artist { 
    // each item spans 2 columns 
    // items are targeted by sibling-position (nth) and type (div) 
    @include gallery (2, of-type); 
    height:10rem; 
    background:pink; 
}

источник

2016-11-10 03:45:09

Большое вам спасибо за объяснения, что! – 626

Susy Сетка Проблема с остовных 6

ответ

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