在浮动元素周围放置边框

时间:2012-01-04 01:34:21

标签: css border css-float

说我有类似下面的代码,我希望在两个左右浮动的图像之间显示一些文字。

<img src="testImage1.png" alt="Test Image 1" style="float:right;" />
<img src="testImage2.png" alt="Test Image 2" style="float:left;" />
<p>Test Text</p>

我想在两个图像和文本周围添加边框。我尝试使用<div>在上述所有3个标记周围添加style="border:2px black solid;"。虽然这增加了边框,但似乎没有考虑图像。也就是说,我们得到类似以下内容(使用StackOverflow和Google徽标)。

enter image description here

我猜这种情况正在发生,因为浮动元素不被视为<div>的一部分。我是一名软件开发人员,而不是Web开发人员,所以我不是CSS的专家。但我确实认为我记得浮动元素在某种程度上是“被忽视”的。任何人都可以详细描述发生了什么以及如何解决它?

3 个答案:

答案 0 :(得分:41)

在这种情况下,使用值overflowhidden添加auto可以解决问题。

检查下面的小提琴:

http://jsfiddle.net/XMrwR/

  

清算浮动溢出方式

     

http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html

答案 1 :(得分:12)

在CSS中,默认情况下浮动元素不会向父级添加高度。

解决方案只是设置overflow: hidden

<div style="border: 2px solid black; overflow: hidden;" 
    <img src="testImage1.png" alt="Test Image 1" style="float:right;" />
    <img src="testImage2.png" alt="Test Image 2" style="float:left;" />
    <p>Test Text</p>
</div>

小提琴:http://jsfiddle.net/JNets/

答案 2 :(得分:7)

将此行添加到CSS属性中:

overflow: hidden