如何让标题的边框/其他内容不与左侧的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>