html – 如何使div高度增加包括浮动图像

前端之家收集整理的这篇文章主要介绍了html – 如何使div高度增加包括浮动图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这就是问题。我有一个div,其中包含几段文字,然后是浮动的图像。图像应该是正确的,但是包含的div不会垂直扩展以适应图像。我知道我可以手动设置div的高度,但这会变得有问题,因为我想为我网站的每个页面使用相同的div,因此高度将需要不同。

以下是代码示例:

HTML

<div id="main_contentBox">
   <h1 class="page"> The Event </h1>
   <img id="sample" src="sample.jpg"/>
   <p>
   stackoverflow is awesome!stackoverflow is awesome!stackoverflow is         awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!</p>

stackoverflow是真棒!stackoverflow是真棒!stackoverflow是真棒!stackoverflow是真棒!

CSS

#main_contentBox {width:918px;
              margin:10px auto;
              padding:10px 20px 20px 20px;
              background-color:#ffffff;
              border-style:solid;
              border-width:1px;
              border-color:#000;}

#main_contentBox img#sample {float:right;}

解决方法

您可以通过更改overflow属性来更改父代块如何处理浮动内容的行为。这应该做到:
#main_contentBox { overflow: hidden; }

猜你在找的HTML相关文章