Question

以下是一体化代码，即html和样式。问题是为什么“Box”div与“Footer”div重叠。您可以复制粘贴代码并在浏览器中自己查看。到目前为止，我已经检查了样式和div的开始和结束，但没有成功。我错过了什么吗？

.shell { width:950px; margin:0; position:relative; }
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0;  }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }

<div id="main">
   <div class="shell">
	 <div class="box">
	   <h2 style="color:#565656;">Latest News</h2>			
	   <div class="entry">
		 <div class="news">
		   newsstring;
		 </div>
	   </div>
	 </div>		
	 <div class="box">
	 </div>
   </div>	
 </div>
 <!-- End of Main -->
 <!-- Footer -->
 <div id="footer">
   <div class="shell">
	 <div class="footer-navigation"> 
	   <ul> 
		 <li><a href="index.php">Home</a></li> 
		 <li><a href="about.html">About</a></li> 
		 <li><a href="Gallery.html">Gallery</a></li> 
		 <li><a href="location.html">Location</a></li> 
		 <li class="last"><a href="contact.html">Contact</a></li> 
	   </ul> 
	 </div> 
	 <div class="container">
	   <table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
		 <tbody>
		   <tr>
			 <td style="height:75px; text-align:center; vertical-align:middle; width:560px">
			   <p><a href="#" target="_blank"><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></a></p>
			 </td>
		   </tr>
		 </tbody>
	   </table>
	 </div>
   </div>
 </div>

Answer 1

只需在主div和页脚中添加“display：inline-block”和“width：100％”。

CSS：

#footer, #main {
  display: inline-block;
  width: 100%;
}

Answer 2

将类.clr添加到元素具有类.shell，如下所示：

<强> CSS

.clr:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
}

<强> HTML

...
<div class="shell clr">
...

的jsfiddle：

https://jsfiddle.net/merLdd2y/

Answer 3

.shell { width:950px; margin:0; position:relative; }
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0;  }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }

<div id="main" style="display:inline; width:100%">
   <div class="shell">
	 <div class="box">
	   <h2 style="color:#565656;">Latest News</h2>			
	   <div class="entry">
		 <div class="news">
		   newsstring;
		 </div>
	   </div>
	 </div>		
	 <div class="box">
	 </div>
   </div>	
 </div>
 <!-- End of Main -->
 <!-- Footer -->
 <div id="footer">
   <div class="shell">
	 <div class="footer-navigation"> 
	   <ul> 
		 <li><a href="index.php">Home</a></li> 
		 <li><a href="about.html">About</a></li> 
		 <li><a href="Gallery.html">Gallery</a></li> 
		 <li><a href="location.html">Location</a></li> 
		 <li class="last"><a href="contact.html">Contact</a></li> 
	   </ul> 
	 </div> 
	 <div class="container">
	   <table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
		 <tbody>
		   <tr>
			 <td style="height:75px; text-align:center; vertical-align:middle; width:560px">
			   <p><a href="#" target="_blank"><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></a></p>
			 </td>
		   </tr>
		 </tbody>
	   </table>
	 </div>
   </div>
 </div>

Answer 4

你没有正确清理浮子。

#footer {
    background: url(images/footer.jpg) left top repeat-x;
    color: #b3adad;
    padding: 24px 4px;
    font-size: 10px;
    clear: both;
}

这将清除标题的浮点数。

您还可以创建以下类，并将其添加到包含浮动元素的任何容器的父级。

.clearFix:after {display: table; clear: both; content: "";}

Answer 5

如果你有漂浮的孩子（.box），你的父母在你告诉他之前不会知道这件事。只需添加到父块（.shell）样式溢出：隐藏。

#main .shell { overflow :hidden; }

Answer 6

元素将浮动在流中找到的下一个内容，在本例中为页脚的文本。有关浮点数的更多信息，请查看此链接：https://css-tricks.com/all-about-floats/

在这种情况下，根据您对.shell的计划，我会添加以下样式：

.shell:after {
  content: ' ';
  display: table;
  clear: both;
}

.shell { width:950px; margin:0; position:relative; }
.shell:after {content: ' '; display: table; clear: both;}
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0;  }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }

<div id="main">
   <div class="shell">
	 <div class="box">
	   <h2 style="color:#565656;">Latest News</h2>			
	   <div class="entry">
		 <div class="news">
		   newsstring;
		 </div>
	   </div>
	 </div>		
	 <div class="box">
	 </div>
   </div>	
 </div>
 <!-- End of Main -->
 <!-- Footer -->
 <div id="footer">
   <div class="shell">
	 <div class="footer-navigation"> 
	   <ul> 
		 <li><a href="index.php">Home</a></li> 
		 <li><a href="about.html">About</a></li> 
		 <li><a href="Gallery.html">Gallery</a></li> 
		 <li><a href="location.html">Location</a></li> 
		 <li class="last"><a href="contact.html">Contact</a></li> 
	   </ul> 
	 </div> 
	 <div class="container">
	   <table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
		 <tbody>
		   <tr>
			 <td style="height:75px; text-align:center; vertical-align:middle; width:560px">
			   <p><a href="#" target="_blank"><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></a></p>
			 </td>
		   </tr>
		 </tbody>
	   </table>
	 </div>
   </div>
 </div>

请记住，还有更多解决方案。你可以使用flex-box方法，你可以使用display：inline-block方法，你甚至可以使用网格方法。这完全取决于您想要实现的目标以及您希望支持的浏览器。

一个div的内容在另一个上重叠？

6 个答案: