1

我的 html 或 css 不工作，容器不工作我应该在图像下方看到一个绿色条，但没有。我认为，由于它是自动的，它无法识别该 div 中有东西，你们能帮帮我吗？

jsfiddle

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

2 回答 2

1

您还没有清除- 这是必需的，因为它有浮动后代（从正常流程#postcontainer中取出） - 一种补救措施是添加，以便它为其浮动后代创建一个新的块格式化上下文，然后像你一样工作' d 期望。请记住，浮动元素不会被正常流程中的其他块级元素确认（如果您不理解，请阅读上面的链接），除非您清除它或为其父级提供新的块格式化上下文。overflow: hidden;height: auto;

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

于 2013-08-14T02:20:31.050 回答
1

您可以display:inline-block;在#postcontainer.

http://jsfiddle.net/cc48D/

于 2013-08-14T02:28:44.750 回答