如何讓標題的邊框/其他內容不與左側的img重疊？

Question

HTML：

 <div id="container"> 

      <!-- Header --> 
      <div id="logo"> 
       <img src="img"> 
      </div> 

      <div id="header"> 
       <h1>Header</h1> 
      </div> 

      <!-- Nav --> 
      <div id="nav"> 
       <ul> 
        <li><a href="#">nav</a></li> 
        <li><a href="#">nav</a></li> 
        <li><a href="#">nav</a></li> 
       </ul> 
      </div> 

      <!-- Main Content --> 
      <div id="content"> 
       <div id="mainContent"> 
       Content 
       </div> 

       <div id="imgOne"> 
        <img src="img"> 
       </div> 

       <div id="imgTwo"> 
        <img src="img"> 
       </div> 

       <div id="imgThree"> 
        <img src="img"> 
       </div> 
      </div> 
     </div> 
     <div id="footer"> 
      Footer 
     </div> 
    </body> 
</html> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

#container { 
    width: 100%; 
} 

#logo { 
    width: 150px; 
    height: 200px; 
    border: 3px solid black; 
    float: left; 
} 

#header { 
    text-align: center; 
    border: 3px solid black; 
} 

#nav { 
    clear: left; 
} 

#content { 

} 

目前它的外觀。

這就是現在的樣子。我希望標題不會重疊，並且仍然保持在頁面的中心位置，我該怎麼做？

對不起，如果帖子是馬虎，這裏第一次發佈&新編碼。

Answer 1

這可以通過很多方式完成，具體取決於頁面上其他所有內容的行爲方式。

下面的示例只是顯示一種方法來解決頭問題。

爲「標題」添加「邊距」和「填充」確保標題文本是頁面中心，並且不會重疊圖像。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
} 
 

 
#logo { 
 
    width: 150px; 
 
    height: 200px; 
 
    border: 3px solid black; 
 
    float: left; 
 
} 
 

 
#header { 
 
    text-align: center; 
 
    border: 3px solid black; 
 
    margin-left: 156px; 
 
    padding-right: 156px; 
 
} 
 

 
#nav { 
 
    clear: left; 
 
} 
 

 
#content { 
 

 
}

<div id="container"> 
 

 
      <!-- Header --> 
 
      <div id="logo"> 
 
       <img src="img"> 
 
      </div> 
 

 
      <div id="header"> 
 
       <h1>Header</h1> 
 
      </div> 
 

 
      <!-- Nav --> 
 
      <div id="nav"> 
 
       <ul> 
 
        <li><a href="#">nav</a></li> 
 
        <li><a href="#">nav</a></li> 
 
        <li><a href="#">nav</a></li> 
 
       </ul> 
 
      </div> 
 

 
      <!-- Main Content --> 
 
      <div id="content"> 
 
       <div id="mainContent"> 
 
       Content 
 
       </div> 
 

 
       <div id="imgOne"> 
 
        <img src="img"> 
 
       </div> 
 

 
       <div id="imgTwo"> 
 
        <img src="img"> 
 
       </div> 
 

 
       <div id="imgThree"> 
 
        <img src="img"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div id="footer"> 
 
      Footer 
 
     </div>