Question

如何为浮动箱子的箱子提供保证金？这是我的源代码：

<!DOCTYPE html>
<html>
     <head>
         <title>Boxes</title>
         <link rel="stylesheet" type="text/css" href="intro.css">
    </head>
     <body>
        <div id="page">
            <div id="header">
                <h3 class="welcome">Welcome</h3>
                <h5 class="welcome">to</h5>
                <h1 class="welcome" style="color:green;font-family:cursive">Tamim's</h1>
                <h5 class="welcome">page</h5>
            </div>
        </div>
            <div class="navigation">
                <ul>
                    <li>home</li>
                    <li>photos</li>
                    <li>important-links</li>
                    <li>facebook</li>
                </ul>
            </div>
            <div id="left">
                <img src="408528_10200574301423959_1609852992_n.jpg">
            </div>
            <div id="right"></div>
            <div id="test"></div>
        </div>
     </body>
</html>

和

#page{
    min-width:360px;
    margin: 10px auto 10px auto;
    background-color: rgb(32,127,224);
    padding: 20px;
    border: 2px solid black;
    box-shadow: inset 0px 0px 10px #777777;
    border-radius: 5px;

}
#header{
    width: 360px;
    margin: 0px auto 0px auto;
    text-align: center;
}
.welcome{
    margin: auto;
    text-align: center;
    display: inline;

}
#left{
    width: auto;
    margin-top: 10px;
    float: left;
    border: 2px inset red;
    padding: 10px;
    border-radius: 5px;
    background-color: rgb(157,160,146);
    height: 425px;
}
#right{

    float: right;
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 30px;
    border: 2px solid green;
    border-radius: 5px;
    height: 425px;
    width: 67%;      

    background-color: rgb(121,241,240);
}
.navigation{
    padding: 1px 3px 3px 3px;
    margin: 20px auto 20px auto;
    width: 500px;
    height: 40px;
    background-color: red;
    border-radius: 5px;
    text-align: center;
}
.navigation li{
    margin: 3px 6px 3px 6px;
    display: inline;
    border: 2px solid black;
    padding: 2px;
    zoom:1;
    width:auto;
}

#test{
    margin: 5px 5px 5px 5px;
    height: 100px;
    background-color: black;
    clear: both;
    border-radius: 5px;
}

Here's the code on Fiddle

现在，当我给出顶部边距时，它不会低于左边或右边？如何给左边的保证金？还有为什么我的#lefts身高比右？但我给他们的身高相同425px。？

Answer 1

现在，当我给出一个上边距时，它不会低于左边或右边？

因为你在测试 - 页脚div中clear:both。您必须在左侧和右侧设置margin-bottom，然后查看演示。

DEMO：http://jsfiddle.net/goodfriend/69QKz/14/

为什么我的#lefts高度大于对了？

看起来它是由左框中的padding引起的。

左边有填充的演示：http://jsfiddle.net/goodfriend/69QKz/6/

左边没有填充的演示：http://jsfiddle.net/goodfriend/69QKz/5/

注意：我还删除了一个</div>结束标记，因为它在标题后关闭了页面div ..

如何为清除元素提供保证金？

1 个答案:

现在，当我给出一个上边距时，它不会低于左边或右边？

为什么我的#lefts高度大于对了？