为什么我的后置容器不能工作？

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这是必需的，因为它具有浮动的后代（ #postcontainer 正常流中删除）-一种补救方法是添加overflow: hidden; #postcontainer overflow: hidden; 以便为其浮动后代和height: auto;创建一个新的块格式化上下文height: auto; 然后将按照您的期望工作。 请记住，浮动元素不会在正常流程中被其他块级元素确认（除非您不了解，请阅读上面的链接），除非您清除它或为其父级提供新的块格式上下文。

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

Answer 2

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

http://jsfiddle.net/cc48D/

为什么我的后置容器不能工作？

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-08-14 02:20:31

解决方案2
1 2013-08-14 02:28:44

为什么我的后置容器不能工作？

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-08-14 02:20:31

解决方案2 1 2013-08-14 02:28:44

解决方案1
1 已采纳 2013-08-14 02:20:31

解决方案2
1 2013-08-14 02:28:44