个人中心
gpt4 book ai didi

html - 如何为已清除的元素提供 margin ？

转载 作者：太空宇宙 更新时间：2023-11-03 18:41:55 27 4
gpt4 key购买 nike

如何为 float 框的相应框提供边距？这是我的源代码:

<!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。？

最佳答案

现在当我给顶部留出边距时，它不会低于左侧或右侧？

因为你clear:both在测试中 - 页脚 div。你必须设置 margin-bottom向左和向右看演示。

演示:http://jsfiddle.net/goodfriend/69QKz/14/

为什么我的#lefts 高度大于右边？

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

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

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

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

关于html - 如何为已清除的元素提供 margin ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17358839/

27 4 0
文章推荐： parsing - 如何获取导致解析错误的字符串？
文章推荐： python - 如何获取 __init__.py 文件中导入的当前模块？
文章推荐： c# - 自修改对象的 Ref 与 No Ref
文章推荐： python - 为什么 Entry.get() 落后一键？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com