對齊和嵌套的div（CSS佈局的麻煩）

Question

我想達到以下佈局：

這是我目前的HTML：

<div id="main"> 
    <div id="content1"> 
     <span>Content1</span> 
     <div id="text"> 
      <span>Text</span> 
     </div> 
     <div id="game"> 
      <span>Game</span> 
     </div> 
    </div> 
    <div id="content2"> 
     <span>Content2</span> 
     <div id="gallery"> 
      <span>Gallery</span> 
     </div> 
    </div> 
</div> 
<div id="footer"> 
    <span>Footer</span> 
</div> 

中間部分被包含在主要股利。左邊部分是內容1，右邊部分是content2。 Content1分爲兩部分（嵌套div）。我與這個簡單的任務小時的奮力...有些事我想做的，但遇到的麻煩：

• 我希望這個網站採取瀏覽器的寬度爲100％
• 我能拆分內容1和content2，並將它們放入同一行，但是當我添加邊框時，我無法再對齊它們（我嘗試了溢出：hidden; display：inline-block;和flex display，但不知何故我無法使它工作..）
• 將content2中的元素居中（是否足夠，如果我使用margin：auto？） 我也想知道如果我發佈的HTML佈局是好的，因爲我不知道嵌套有多麼受歡迎？或者是嵌套通常用於容器等？感謝您的幫助

Answer 1

您可以嵌套Flexbox

.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 
.main { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.right { 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border: 1px solid black; 
 
} 
 
.left { 
 
    display: flex; 
 
    border: 1px solid black; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 
.one { 
 
    flex: 2; 
 
} 
 
.two { 
 
    flex: 1; 
 
    border-top: 1px solid black; 
 
} 
 
header, 
 
footer { 
 
    background: lightblue; 
 
    height: 50px; 
 
}

<div class="content"> 
 
    <header>Header</header> 
 
    <div class="main"> 
 
    <div class="left"> 
 
     <div class="one">One</div> 
 
     <div class="two">Two</div> 
 
    </div> 
 
    <div class="right">Right</div> 
 
    </div> 
 
    <footer>Footer</footer> 
 
</div>