首页 > div层为什么没有被自动撑开

div层为什么没有被自动撑开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>仿凡客</title>
    <style type="text/css">
        *{
            padding:0px;
            margin:0px;
            font-size:12px;
        }
        a{
            text-decoration: none;
            font-size:12px;
        }
        #main{
            width:900px;
            height:33px;
            margin:10px auto;
            border:none;
            border-bottom:1px solid #f7f7f7;
            position:relative;
        }
        #main #mine_box{
            width:100px;
            height:auto;
            background:red;
            position:relative;          
            border:1px solid red;

        }
        #mine_box #mine{
            width:80px;
            float:left;
            line-height:33px;
            position:absolute;
            left:0px;
            top:0px;
        }
        #mine_box ul{
            width:100px;
            position:absolute;
            top:33px;
            left:0px;           
            list-style:none;
        }
        #mine_box ul li{
            width:100px;
            float:left;

        }
        #mine_box ul li a{
            text-align:center;
            line-height:15px;
        }
    </style>

</head>
<body>
<div id="main">
    <div id="mine_box">
                <a href="" id="mine">我的凡客</a>
                <ul>
                    <li><a href="">111111</a></li>
                    <li><a href="">2222222</a></li>
                    <li><a href="">33333333</a></li>
                </ul>
    </div>      

</div>

</body>
</html>

求教!上面的div层为什么没有自动撑开 背景和边框都没有显示!

clear-fix,或者用inline-block布局


题境:
1.很多时候设置overflow 就能撑开元素。但是你这里 因为子元素ul设置了absolute定位,所以不能设置overflow:hidden ,不然不但没撑开反而隐藏了ul
2.看了你的代码,有些设置了float 也设置absolute, 其实absolute存在的时候floate会失效

解决方案
1.去掉ul的绝对定位,使用float,然后 #main #mine_box 可以使用overflow 就能撑开 并且包含ul
2.直接在#main #mine_box中添加一个子元素 并且设置clear:both 此时#main #mine_box被撑开并且不会包含ul

关于这些知识 可以查阅 http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html


关于清除浮动的知识清除浮动总结


你的li设置了浮动。清除浮动就行了!


高度没撑开,只有两种可能性:
1,浮动;
2,绝对定位


问题描述的不是很清楚啊,是要这样么?

#main #mine_box{
    width:100px;
    height:100%;   // 改成100%
    background:red;
    position:relative;          
    border:1px solid red;

}
【热门文章】
【热门文章】