0
爲什麼，如果我有設定爲100％，一個在另一個的上面，裏面內容的兩個div容器（IMGS和文本），他們保持重疊？我希望每個主容器都是自己的塊。在寬度爲100％我的div不包含它們的元素（重疊？）
容器div始終高於它所包含的內容。我的兩個容器沒有浮動，邊距設置爲0和自動。我把div設置爲block。圖像/文本適當堆疊，而不是它們的父級div。如果這是任何指標，我也使用normalize.css。
原諒我的代碼，我還在學習和搞亂，所以我知道它是「髒」。謝謝你的幫助！
編輯：我經歷了並刪除了尼爾提到的100％。仍然有不包含元素的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％的類？我找不到所有三個人中的一個，但我有一個邊距爲「0 auto」，寬度爲100％。 那裏的規則和邏輯是什麼？謝謝你的幫助！ – ObbyOss
你可以但將你的元素設置爲100％的寬度，而填充/邊距的東西會讓它跳出去。如果它沒有得到回答，我會在晚餐後再看看:) –
謝謝尼爾！希望我能在那之前解決它。我正在研究這個話題，我會試驗一下。 享用晚餐！ – ObbyOss