Question

为什么如果我有两个容器div设置为100％，一个在另一个上面，内容（imgs和text）内部保持重叠？我希望每个主容器都是它自己的块。

容器div总是高于它要包含的内容。我的两个容器没有浮动，它们的边距设置为0和auto。我有div设置为块。图像/文本堆栈恰当，而不是它们的父div。我也使用normalize.css，如果这是任何指标。

请原谅我的代码，我还在学习和搞乱，所以我知道它很脏。＆＃34;脏。＆＃34;谢谢你的帮助！

编辑：我经历并删除了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 &amp; 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 &amp; 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>

Answer 1

你有多个边距和填充的实例，我可以说相当不错的几率，你的一个元素是100％+边距+填充，因此重叠。

100％宽度我的div不包含他们的元素（重叠？）

1 个答案: