2017-01-21 13 views

答えて

1

と一致するテキストを取得するには、ラッパーの内側だときの幅を100%に私たちの不和サーバーを参加という青いテキストを作成しようとしている enter image description here 全幅要素にbackground-colorを適用し、コンテンツセクションの幅に関係なく、他の要素に含める内部テキストを囲みます。スクリーンショットに一致する例を以下に示します。 .viewportは、実際のコンテンツの幅を定義するクラスになります。完全な幅にしたい要素の内側に入れ子にするだけです。

.container { 
 
    background: #09c; 
 
    color: #fff; 
 
} 
 

 
.viewport { 
 
    width: 80%; 
 
    max-width: 960px; 
 
    margin: auto; 
 
} 
 

 
.content { 
 
    background: #eee; 
 
    padding: 1em 0 0; 
 
} 
 

 
.content .viewport { 
 
    background: #fff; 
 
}
<div class="container"> 
 
    <div class="viewport">Join our discord server</div> 
 
</div> 
 

 
<nav class="viewport">navigation</nav> 
 

 
<div class="content"> 
 
    <div class="viewport">content section<br>content section</div> 
 
</div>

関連する問題