包含50％寬度水平divs到整體包裝寬度（1200px）的內容

Question

我想實現日益流行的設計 - 水平對齊兩個50％寬度divs（.tile），但其內容跨兩個div限制爲整個寬度（等於站點其餘部分的頁面包裝，例如1200px）。我讓它們向左浮動以實現水平對齊，每個都有對比的顏色。在2個div上畫一個居中的「覆蓋」包裝。希望下面的代碼解釋了我的設置：

CSS

.full-width-row { 
    width: 100%; // 100% of entire page so child divs bg color will stretch 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    height: auto; 
    position: relative; 
} 
.tile { 
    width: 50%; 
    float: left; 
    height: 100%; 
    margin-bottom: -99999px; 
    padding-bottom: 99999px // hack to fill height of parent 
} 
.tile-content { 
    padding: 5%; 
} 
.left { 
    background: #FFC15E; 
} 
.right { 
    background: #3E7F72; 
} 

HTML

<div class="full-width-row"> 
    <div class="tile left"> 
     <div class="tile-content"> 

        //CONTENT LEFT 

     </div> 
    </div> 
    <div class="tile right"> 
     <div class="tile-content"> 

        //CONTENT RIGHT 

     </div> 
    </div> 
</div> 

這裏的父（。全寬行）是整個窗戶的100％，所以BG 2個子div的顏色將會延伸整個頁面。這是我想要在最大定義的寬度（等於1200px）內表現這些孩子的內容。有沒有人建立過類似的佈局或對如何實現這一目標有任何建議？

我想右邊的div永遠不會是一個問題，因爲它總是在1200px的包裝空間中，但左手將繼續在更大的屏幕上左移。

Answer 1

這是一個棘手的一個解釋，但感謝大家的努力。我的解決方案畢竟相當簡單。左手側的內容類我還添加了一個新的類「限制」

.restrict { 
    max-width: 600px; 
    float: right; 
} 

這推左側對抗「的600px的屏障中心（半頁包裝紙），同時保持父的顏色50％div來拉伸整個頁面。具有諷刺意味的是，我已經看到了它，我想我可能只是將內容div的中心集中起來

Answer 2

我並不完全確定你想要什麼，但如果是關於將外部容器居中，你可以簡單地將margin: 0 auto應用於它。我在下面的代碼片段中做了這個，並添加了max-width: 500px以使其在代碼片段窗口中立即可見（當然，您可以將它設置爲1200px）。

注：與margin: 0 auto定心如果該元素具有position設置，這是你的榜樣的情況下只適用）

html, body { 
 
margin: 0; 
 
} 
 
.full-width-row { 
 
    width: 100%; // 100% of entire page so child divs bg color will stretch 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    height: auto; 
 
    position: relative; 
 
    max-width: 500px; 
 
    margin: 0 auto; 
 
} 
 

 
.tile { 
 
    width: 50%; 
 
    float: left; 
 
    height: 100%; 
 
    margin-bottom: -99999px; 
 
    padding-bottom: 99999px; 
 
    background: #ddd; 
 
} 
 

 
.tile-content { 
 
    padding: 5%; 
 
} 
 

 
.left { 
 
    background: #FFC15E; 
 
} 
 

 
.right { 
 
    background: #3E7F72; 
 
}

<div class="full-width-row"> 
 
    <div class="tile left"> 
 
    <div class="tile-content"> 
 

 
     //CONTENT LEFT 
 

 
    </div> 
 
    </div> 
 
    <div class="tile right"> 
 
    <div class="tile-content"> 
 

 
     //CONTENT RIGHT 
 

 
    </div> 
 
    </div> 
 
</div>