1

如何为浮动框对应的框提供边距？这是我的源代码：

<!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;
}

这是小提琴上的代码

现在当我给顶部一个边距时，它不是低于左边还是右边？我如何给左边的边距？还有为什么我的#lefts身高比对的大？但是我给了它们相同的高度 425px。？

4

1 回答 1

0

现在当我给顶部一个边距时，它不是低于左边还是右边？

因为你clear:both在测试 - 页脚 div。你必须设置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..

于 2013-06-28T07:04:04.733 回答