Question

您好我正在尝试在我的网站首页中创建一个包含浮动img和一些浮动文本h3，p和a的div。然后我想用不同的文本/图片循环下面的div。当我这样做一旦它工作正常但容器div没有拉伸以适应内容。所以当我在下面添加另一个时，它会重叠。

代码：

<div id="blog">

    <h1>BLOG</h1>

        <div id="postcont">
        <img src="blog1.png" width="40" height="40" />
        <h3>Playing At The Phenoix</h3>
        <p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...<a href="bloglink.php">read more </a></p
        >

        </div>

        <div id="postcont">
        <img src="blog1.png" width="40" height="40" />
        <h3>Playing At The Phenoix</h3>
        <p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...<a href="bloglink.php">read more </a></p
        >

        </div>
  </div>


#blog {
float:left;
width:400px;
border-top:#0FF solid 6px;

}

#postcont {
padding:10px;
border-top:1px #FFF solid;
margin-top:10px;
}

#blog h1 {
    font-size:20px;
    color:#FFF;
    padding:10px;
    padding-left:0px;
    letter-spacing:2px;
}
#blog p {
    font-size:15px;
    color:#FFF;
    float:right;
    clear:right;
    width:300px;
    margin-right:30px;
    letter-spacing:2px;
    margin-top:5px;
}
#blog a {
    font-size:15px;
    color:#FFF;
    float:right;
    clear:right;
    width:300px;
    margin-right:0px;
    letter-spacing:2px;
    margin-top:5px;
    font-style:italic;
    text-decoration:underline;
}
#blog h3 {
    font-size:15px;
    color:#FFF;
    float:right;
    clear:right;
    width:300px;
    margin-right:30px;
    letter-spacing:2px;
    margin-top:5px;
    font-weight:bold;
}


#blog img {
    float:left;
    clear:left;
}

Answer 1

除非告诉他们，否则块级元素不会扩展到浮动元素的高度。您应该在最后一个浮动元素之后添加一个clearing-element来解决此问题。而不是：

      </div>
</div>

使用：

      </div>
      <br style="clear: both"/>
</div>

有关此解决方案的扩展说明以及替代解决方案，请参阅：http://www.quirksmode.org/css/clearing.html

浮在div里面

1 个答案: