Question

<div>我遇到了一些问题。内部<div>（内容div）不会推送外部<div>（wrap_content）。

让我发布代码，以便您有机会看到可能出现的问题。

的style.css

* {
    padding: 0px;
    margin: 0px;
}

body {
background: #e2e2e2;
color: #f2f2f2;
font-family: Arial;
}

#wrap_design {
width: 1139px;
}

#wrap_content { 
float: right;
max-width: 963px;
height: 100%;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;

}

#header {
height: 236px;
width: 963px;
background-color: #2d2828;
}
#headerimg{
z-index: 1;
margin-left: -26px;
}

#loggedin_box {
min-height: 230px;
width: 160px;
background: #2d2828;
float: left;
margin-top: 236px;
position: static;
padding-bottom: 5px;
}

#loggedin_box_green {
height: 30px:
width: 150px;
background: #73aa09;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
letter-spacing: 2px;
}

#loggedin_box ul {
border: none;
}

#loggedin_box ul li {
list-style: none;
text-align: left;
}

#loggedin_box ul li a {
font-family: Arial;
font-size: 14px;
color: #b1b2b2;
text-decoration: none;
padding-left: 5px;
}


#menu_container {
margin: 0px 0px 0px 0px;
background: #2d2828;
font-family: Arial;
    width: 100%;
    margin: 0px auto;
    height: 65px;
}

#content {
color: black;
vertical-align: top;
height: 100%;
margin-bottom: 10px;
clear: both;
}

#content-sidebar {
border-left: 2px solid #2d2828;
float: right;
width: 285px;
max-width: 285px;
height: 100%;
}

的index.php

<html>
<head>
<link rel="shortcut icon" href="images/nfgico.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/style/style.css" type="text/css" />
</head>
<body>
<CENTER>
<div id="wrap_design">
<div id="loggedin_box">
<?php
    if($_SESSION['username'] == "") {
?>
    <div id="loggedin_box_green">Log ind</div>
    <div style="text-align: left; padding-left: 10px;">
        <form action="login_check.php" method="post">
            <input type="text" value="Brugernavn" name="username" style="width: 140px;" onclick="this.value=''"><br /><br />
            <input type="password" value="password" name="password" style="width: 140px;" onclick="this.value=''"><br /><br />
            <font style="font-family: Arial; font-size: 12px;">Husk mig:</font><input style="margin-left:15px;" type="checkbox" name="rememberme" class="checkbox" value="1" /><br /><br />
            <input type="submit" value="Log ind"><br /><br />
        </form>
        <ul>
            <li><a href="#">Glemt kodeord</a></li>
            <li><a href="/create_user.php">Opret bruger</a></li>
        </ul>   
    </div>
<?php   
    } else {
?>
    <div id="loggedin_box_green">Network</div>
        <ul>
            <li><a href="#">Wall</a></li>
            <li><a href="#">Profil</a></li>
            <li><a href="#">Chat</a></li>
            <li><a href="#">Achievements</a></li>
            <li><a href="#">Clanside</a></li>
            <li><a href="#">Søg modstander</a></li>
            <li><a href="#">Søg spil</a></li>
            <li><a href="/index.php?logout=yes">Log ud</a></li>
        </ul>
<?php
    }
?>
</div>
<div id="wrap_content"> <!-- This is the one that needs to be pushed -->
    <div id="header">
        <img src="/images/banner.png" id="headerimg">
    </div>

    <div id="menu_container">
                <div id="droplinetabs1" class="droplinetabs">
                    <ul>
                    <li><a href="/"><span>Forside</span></a></li>
                    <li><a href="#"><span>Nyheder</span></a>
                        <ul>
                            <li><a href="#">Seneste</a></li>
                            <li><a href="#">lol</a></li>
                            <li><a href="#">loool</a></li>
                            <li><a href="#">loool</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span>Artikler</span></a></li>
                    <li><a href="#"><span>Spil</span></a></li>
                    <li><a href="#"><span>Turneringer</span></a></li>
                    <li><a href="#"><span>Clan</span></a></li>
                    <li><a href="#"><span>Streams</span></a></li>
                    <li><a href="#"><span>Webshop</span></a></li>
                    </ul>
                </div>

    </div>      
        <!-- Content/brødtekst -->
    <div id="content">
        CONTENT GOES HERE THIS IS WHAT NEED TO PUSH
    </div>  
</div>
</CENTER>

</body>
</html>

index.php的部分代码我没有发帖，因为我希望你不需要它：）

我真的希望有人可以帮助我！ PS。我在互联网上做了一些研究，并了解到我应该使用clear: both;，但我真的无法让它发挥作用。

Answer 1

从height: 100%中删除#wrap_content style（这会导致问题），然后确保它包裹任何浮动元素，添加宽度和溢出如下：

#wrap_content { 
    float: right;
    max-width: 963px;
    border-right: 8px solid #2d2828;
    border-left: 8px solid #2d2828;
    border-bottom: 8px solid #2d2828;
    padding-bottom: 10px;
    width: auto; /* Must use this for overflow to do what you want */
    overflow: hidden; /* This, plus width, causes box to stretch around floated elements inside of it */
}

就像一点点说明，那里有相当数量的不必要的CSS。我鼓励你仔细检查并修改/删除它。你可以用一半的css来做你想要的事。

删除所有“身高：100％;”无处不在 - 如果不按照你的想法去做。

Answer 2

我建议删除你的CENTER，让#wrap_design像这样：

    #wrap_design
    {
        margin: 0 auto;
        width: 1139px;
    }

这将使您的包装中心 - 我强烈建议不要使用CENTER。如果你想改变这个包装器的顶部边缘（即从顶部和底部20px）做这个边距：20px auto;。

你不需要使用clear：both;一定。在float（或多个浮点数）的包装中，你可以放置overflow：hidden（相同的效果），不需要额外的标记：

    <style type="text/css">
    .container
    {
        background: #CCC;
        border: 1px solid #ddd;
        overflow: hidden;
        width: 400px;
    }
    .left
    {
        float: left;
    }
    .right
    {
        float: right;
    }
</style>
<div class="container">
    <div class="left">
        this will float left
    </div>
    <div class="right">
        this will float left
    </div>
</div>

如果您在此示例中没有“overflow：hidden”，则不会在.container中看到“#CCC”背景颜色。

这与做清楚的方式相同（但上面再次更好，因为标记更少）：

<style type="text/css">
    .container
    {
        background: #CCC;
        border: 1px solid #ddd;
        width: 400px;
    }
    .left
    {
        float: left;
    }
    .right
    {
        float: right;
    }
    .clear 
    {
        clear: both;
    }
</style>
<div class="container">
    <div class="left">
        this will float left
    </div>
    <div class="right">
        this will float left
    </div>
    <div class="clear"></div>
</div>

在这样的情况下（当你想让一个孩子“在父母之外”时），Clear方法是好的：）

    <style type="text/css">
    .container
    {
        background: #CCC;
        border: 1px solid #ddd;
        margin: 50px auto;
        width: 400px;
    }
    .left
    {
        float: left;
    }
    .right
    {
        background-color: #333;
        color: #FFF;
        float: right;
        margin: -10px -40px 0 0;
    }
    .clear 
    {
        clear: both;
    }
</style>
<div class="container">
    <div class="left">
        this will float left
    </div>
    <div class="right">
        this will float left
    </div>
    <div class="clear"></div>
</div>

但是，我不建议使用标记，如果你的设计可能不同，你也可以使用这样的标记：

    <style type="text/css">
    .container
    {
        background: #CCC;
        border: 1px solid #ddd;
        margin: 50px auto;
        width: 400px;
    }
    .left
    {
        float: left;
        width: 200px;
    }
    .right
    {
        background-color: #333;
        color: #FFF;
        float: right;
        margin: -10px -40px 0 0;
        width: 240px;
    }
    .full
    {
        background: #f5f5f5;
        clear: both;
        margin: 20px auto;
        text-align: center;
        width: 90%;
    }
</style>
<div class="container">
    <div class="left">
        this will float left
    </div>
    <div class="right">
        this will float left
    </div>
    <div class="full">
        this is full sized
    </div>
</div>

如果你遵循这些例子，你应该解决你的问题：）

内心的div没有推动其他div，不能明白：两者;上班

2 个答案: