为什么如果我将两个容器 div 设置为 100%，一个在另一个之上，其中包含内容(img 和文本)，它们会一直重叠？我希望每个主容器都是它自己的 block 。
容器 div 总是远高于它要包含的内容。我的两个容器没有 float ，它们的边距设置为 0 和自动。我将 div 设置为 block 。图像/文本堆栈适当，而不是它们的父 div。如果这是任何指标，我也在使用 normalize.css。
请原谅我的代码，我仍在学习和乱搞，所以我知道它是“脏”的。感谢您的帮助!
编辑:我检查并删除了 Neil 提到的 100%s。仍然存在不包含其元素的 div 的问题。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="home-hero-image">
<h1>Gov Defenders Assemble</h1>
</div>
<div class="header_container">
<div class="header_onecol">
<ol>
<li class="links">Blog</li>
<li class="links">Members</li>
<a href= "/Technology/index.html"><li class="links">Technology</li></a>
<li class="links">Contact Us</li>
</ol>
</div>
</div>
<div class="intro">
<p class="maintext">
We're dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
<div class="onecol">
<div class="twocol">
<h2>The Partners</h2>
<p>We've come together to offer our views on security technologies and their applications in the government. We want to share our knowledge with you to together fix your cybersecurity problems.</p>
</div>
<div class="twocol">
<div class="twocol">
<a href="/Partners/DLT Solutions/index.html">
<img class="logos" src="images/dltsolutions_logo.jpg">
</a>
<a href="/Partners/ForeScout/index.html">
<img class="forescout" src="images/forescout_logo.png">
</a>
<a href="/Partners/Oracle/index.html">
<img class="logos" src="images/oracle_logo.jpg">
</a>
<a href="/Partners/SolarWinds/index.html">
<img class="logos" src="images/solarwinds_logo.jpg">
</a>
</div>
<div class="twocol">
<a href="/Partners/DellSoftware/index.html">
<img class="logos" src="images/dell_software_logo.png">
</a>
<a href="/Partners/NetApp/index.html">
<img class="logos" src="images/netapp_logo.jpg">
</a>
<a href="/Partners/RedHat/index.html">
<img class=logos src="images/red_hat_logo.jpg">
</a>
<a href="/Partners/Symantec/index.html">
<img class="logos" src="images/symantec_logo.jpg">
</a>
</div>
</div>
</div>
<div class="onecol">
<h2>The Technologies</h2>
<ol>
<li class="technologies">
<img class="technology" src="images/mobile.png">
<h4>Mobile Device Management & Endpoint Security</h4></li>
<li class="technologies">
<img class="technology" src="images/data.png">
<h4>Data Loss Prevention</h4></li>
<li class="technologies">
<img class="technology" src="images/monitoring.png">
<h4>Continuous Monitoring</h4></li>
<li class="technologies">
<img class="technology" src="images/management.png">
<h4>Identity & Access Management</h4></li>
<li class="technologies">
<img class="technology" src="images/cloud.png">
<h4>Cloud Security</h4></li>
</ol>
</div>
</body>
</html>
body {
font-family: Helvetica, Arial, Sans-serif;
font-style: normal;
font-weight: 200;
color: #888888;
margin: 0;
padding: 0;
font-size: 100%;
display: block;
text-align: center;
}
p {
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
.home-hero-image {
height: 250px;
background: url('../images/hero_image.jpg') no-repeat;
z-index: -1;
}
h1 {
color: white;
float: right;
padding-right: 5%;
font-size: 5em;
}
.header {
height: 77px;
position: relative;
clear: both;
background-color: white;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}
.fixed {
position:fixed;
top:0px;
right:0px;
left:0px;
padding-bottom: 7px;
z-index:999;
}
.header_container {
width: 75%;
margin: 0 auto;
padding: 0 12px;
}
.header_onecol {
width: 97%;
height: 40px;
margin: 1%;
display: block;
overflow: hidden;
background-image: url('../images/GovDefendersLogo.png');
background-repeat: no-repeat;
padding-top: 24px;
}
ol {
list-style: none;
margin: 0;
padding: 0;
color: black;
}
.links {
float: right;
margin-left: 30px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 400;
}
.intro {
background-color: #9d2d31;
padding: 20px 0;
}
.maintext {
width: 80%;
margin: 15px auto;
color: white;
text-align: center;
font-size: 1.5em;
line-height: 2;
}
.twocol {
width: 47.9%;
float: left;
margin: 2% 1.04%;
}
h2 {
font-size: 3em;
color: #db7027;
font-weight: bold;
text-transform: uppercase;
}
.logos {
float: left;
margin: 10% 0 10% 15%;
width: 150px;
}
.forescout {
float: left;
margin: 10% 0 10% 23%;
}
.onecol {
width: 80%;
margin: 0 auto;
}
.technologies {
width: 15%;
float: left;
border: solid 1px gray;
height: 120px;
padding-top: 10px;
margin: 5px 2.4% 0;
background-color: white;
}
h4 {
color: gray;
font-size: 12px;
font-weight: 200;
}
<script language="javascript" type="text/javascript">
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
</script>
最佳答案
您有多个边距和填充实例，我可以相当有把握地说您的元素之一是 100%+边距+填充，因此重叠。
关于html - 在 100% 宽度时，我的 div 不包含它们的元素(重叠？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21971838/