スージーグリッドの問題点6項目

「アーティスト」セクションに問題があります。私はこのためにギャラリーmixinを使うべきか、私が他のセクションのようにスパンを使うべきかどうかは分かりません。

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）である。 Last-childはレイアウトではなくDOMツリーによって決定されます。

ギャラリーmixinはここでうまくいくでしょう。また、DOMベースのnth-セレクタも使用しますが、より直接的に適用します。すべてのあなたのアーティストと一緒にコンテナに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

スージーグリッドの問題点6項目

答えて

関連する問題