如何讓我的div外包裝，但裏面的文字？

Question

像這樣： 我試圖使藍色文本在那裏說加入我們的不和諧服務器寬度100％時，其內部的包裝，它的內部包裝來獲取文本與包裝

Answer 1

匹配您將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>