我一直试图搜索这个问题的成本是多少。我的分区 如果你可以是红色背景。它重叠到 nav 和其他 div 的顶部。 我认为问题是我的 div 或 div 的分组，我想我可能忘记关闭其中一个 div。我仔细检查了每个 div，但遗憾的是我没有发现任何错误。我知道有错误，因为它重叠了，但我无法修正它。
如果希望有人明白我的观点和我的问题。现在已经一个多月了。我是 html 和 css 的初学者
非常感谢
.content{
width:1024px;
margin:auto;
height: 2000px;
color: ffffff;
background-color: #17120f;
}
.bigimage{
heigth: 100px;
background-color: red;
}
.signage{
margin-bottom: 10px;
}
.navicon{
float:left;
width: 100%;
margin-left: 940px;
}
.signage{
float: left;
width: 65%;
}
.nav{
float: left;
width: 35%;
margin-bottom: 10px;
}
.nav li{
display: inline;
}
.nav ul li a{
text-decoration: none;
color: ffffff;
}
.bigimage{
margin-left: 5px;
}
.treeparagh{
margin-top: 20px;
}
.firstparag{
float: left;
width: 30%;
padding-left: 10px;
padding-right: 9px;
margin-right: 10px;
background-color: #17120f;
}
.firstimage{
float: left;
margin-top: 10px;
margin-right:10px;
}
.secondparag{
float: left;
width: 30%;
padding-left: 10px;
padding-right: 9px;
margin-right: 10px;
background-color: #17120f;
}
.secondimage{
float: left;
margin-top: 20px;
margin-right: 10px;
}
.thirdparag{
float: left;
width: 30%;
padding-left: 20px;
padding-right: 10px;
background-color: #17120f;
}
.thirdimage{
float: left;
margin-top: 20px;
margin-right: 10px;
}
.firsttwoparagh{
width: 60%;
float: left;
}
.treeparagh{
background-color:red;
}<body>
<div class = "content">
<div class = "navicon">
<a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/house icon.png"/></a>
<a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/mail icon.png"/></a>
<a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/stracture icon.png"/></a>
</div>
<div class ="secondpart">
<div class = "signage">
<a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/topimages.png"/></a>
</div>
<div class = "nav">
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> Service</a> </li>
<li><a href="#"> Porfolio</a> </li>
<li><a href="#"> About</a> </li>
<li><a href="#"> Contact Us</a> </li>
</ul>
</div>
</div>
<div class = "bigimage">
<a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/center image.png"/></a>
</div>
<div class = "treeparagh">
<div class = "firstparag">
<div class = "firstimage">
<a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/firstparagh.png"/></a>
</div>
<div class = "firsttitle">
<h1>FIRST PARAGPAH </h1>
</div>
<div class ="firstbody">
<p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="#"> Read More </a>
</div>
</div>
<div class = "secondparag">
<div class = "secondimage">
<a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/secondparagh.png"/></a>
</div>
<div class = "secondtitle">
<h1>SECOND PARAGHAP</h1>
</div>
<div class = "secondbody">
<p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="#"> Read More </a>
</div>
</div>
<div class = "thirdparag">
<div class = "thirdimage">
<a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/thirdparagh.png"/></a>
</div>
<div class = "thirdtitle">
<h1> THIS IS IT </h1>
</div>
<div class = "thirdbody">
<p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="#"> Read More </a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
你有一个额外的 div 在底部关闭 去检查你的 html https://validator.w3.org/
</div>关于html - 覆盖 1 个 div 但不会扭曲网站或不安排网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36580643/