【发布时间】：2014-02-24 02:57:00
【问题描述】：
为什么如果我将两个容器 div 设置为 100%，一个在另一个之上，内部的内容（imgs 和文本）它们会一直重叠？我希望每个主容器都是自己的块。
容器 div 总是在它要包含的内容之上。我的两个容器没有浮动，它们的边距设置为 0 和自动。我将 div 设置为块。图像/文本适当地堆叠，而不是它们的父 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>
【问题讨论】：
-
我想我知道你在说什么。当元素处于“width”属性时，但当您将其更改为“max-width”属性时，元素开始重叠。
标签： html css width positioning overlap