將容器安裝到導航器寬度，但限制內容寬度

容器的背景圖像應該適合導航器寬度，但內容應該具有800px的最大寬度。因此，當我縮小時，內容不會以醜陋的形式沿導航器的寬度傳播。將容器安裝到導航器寬度，但限制內容寬度

我想知道如果這是可能的只是我目前的HTML代碼，我不想在我的HTML中添加另一個標籤。

這是我的代碼：

.container{ 
 
    display:flex; 
 
    flex-wrap:no-wrap; 
 
    background-image: /* some huge image */ 
 
} 
 
.container div{ 
 
    flex:1; 
 
}

<div class="container"> 
 
    <div> 
 
    <h1>Section 1</h1> 
 
    <p>Some text</p> 
 
    </div> 
 
    <div> 
 
    <h1>Section 2</h1> 
 
    <p>Some text</p> 
 
    </div> 
 
    <div> 
 
    <h1>Section 3</h1> 
 
    <p>Some text</p> 
 
    </div> \t 
 
</div>

這裏是一個CODEPEN一些化妝品

來源

2016-12-21 GhostOrder

這個問題不清楚和混亂。 –

@Michael_B我剛剛編輯我的問題，使其更清楚。 – GhostOrder

@GhostOrder你可以做一個粗略的草圖，它應該如何，與導航器寬度混淆很少 –

父DIV：導航

讓家長裏子格，設置孩子的寬度爲800px。

中心（或任何地方）具有保證金的子div：0 auto;

將內容放入孩子內。

編輯：哎呀我想這就是你不想做的，對不起。

來源

2016-12-21 02:29:38 Godron629

您可以設置容器最大寬度：800px;和餘量：0自動;

來源

2016-12-21 03:57:56 Hanif

對不起，我忘了詳細說明容器有背景圖片，我希望背景適合導航器寬度。我剛剛編輯了我的問題。 – GhostOrder

您將需要2個容器爲您的項目。

像

<div id="main-container"> 
    <div class="container"> 
    </div> 
</div>

所以，你可以設置一個max-width包含的項目，但不影響與背景的容器的寬度。

這是你更新code

來源

2016-12-21 04:28:14 Miguel

是的，我知道這個解決方案，但然後我會添加一個div只是爲了設計目的，這不會是語義上的權利？這就是我想知道是否有另一個解決方案而不需要添加第二個容器的原因，也許是Jquery（儘管我認爲這太過於設計目的） – GhostOrder

將容器安裝到導航器寬度，但限制內容寬度

回答

相關問題