Question

我的html或css无法正常工作且容器无法工作我应该看到图像下面的绿色条但不是。我认为，因为它在自动上它不会认识到那个div中有东西可以帮助我吗？

HTML

<html>
<head>
   <link rel="stylesheet" type="text/css" href="main2.css">
</head>
<body>

   <div id="content">

        <div id="postcontainer">
            <div id="postpicture">
                <img src="" width="80px" height="80px">
            </div>
                <div id="right">
                    <div id="postheader">
                        <div id="postname">
                            Sean Allen
                        </div>
                        <div id="postdate">
                            July 15, 2013
                        </div>
                    <div id="post">sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample </div>
                    </div>
                </div>
                <br class="clear" />
        </div>


    </div>

</body>
</html>

我的CSS

html, body {
Padding:0px;
margin:0px;
background:#EDEDED;
}

#content{
width:900px;
height:auto;
min-height:1000px;
background:#FFFFFF;
}

#postcontainer{
width:auto;
height:auto;
background:green;
}

#postpicture{
width:80px;
height:80px;
float:left;
padding:8px;
border:2px solid #FFFFFF; 
outline:1px solid #AAAAAA;
background:yellow;
}

#right{
width:800px;
height:auto;
float:right;
background:blue;
}

#postheader{
width:790px;
height:auto;
background:red;
}

#postname{
width:auto;
height:19px;
padding:5px;
padding-top:10px;
font-weight:600;
float:left;
background:brown;
}

#postdate{
width:auto;
height:19px;
padding:5px;
padding-left:10px;
padding-top:13px;
float:left;
font-size:13px;
background:purple;
}

#post{
width:785px;
height:auto;
padding-left:15px;
float:left;
background:orange;
 }

Answer 1

您尚未清除#postcontainer - 这是必需的，因为它已经浮动后代（从normal flow中取出） - 一种补救方法是添加overflow: hidden;以便创建它的浮动后代的新块格式化上下文和height: auto;将按照您的预期工作。请记住，正常流程中的其他块级元素不会确认浮动元素（如果您不理解，请阅读上面的链接），除非您clear或为其提供新的block-formatting context父节点。

http://jsfiddle.net/ANhUn/1/

Answer 2

您可以在display:inline-block;中使用#postcontainer。

http://jsfiddle.net/cc48D/

为什么我的邮政容器不起作用？

2 个答案: