放在浮动元素周围的边界 [英] Putting a Border Around Floating Elements

问题描述

说我有一些像下面的代码，我想在两个图像之间显示一些文本，我向左和向右浮动。

 < img src =testImage1.pngalt =Test Image 1style =float：right; /> 
< img src =testImage2.pngalt =测试图像2style =float：left; /> 
< p>测试文字< / p> 
  

我想在两个图像和文本之间添加边框。我试着在上述所有3个标签上使用< div> ，并使用 style =border：2px black solid;。虽然这增加了一个边界，但似乎不考虑图像。也就是说，我们得到类似下面的东西（使用StackOverflow和Google徽标）。

>

我猜这是发生的，因为浮动元素不被认为是< div> 的一部分。我是一个软件开发人员，而不是一个Web开发人员，所以我不是CSS的专家。但我认为我记得浮动元素在某种程度上是忽略的。任何人都可以详细描述发生了什么，如何解决它？

解决方案

在这种情况下添加溢出 c $ c>隐藏或自动可解决问题。

：

http://jsfiddle.net/XMrwR/

清除浮动溢出方式 b

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

Say I have something like the following code, where I want to display some text between two images that I am floating left and right.

<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>

I want to add a border around the two images and the text. I tried putting a <div> around all 3 of the above tags and using style="border:2px black solid;". While this adds a border, it seems to not take the images into account. That is, we get something like the following (using StackOverflow and Google logos).

I am guessing this is happening because the floating elements are not being considered as part of the <div>. I am a software developer, not a web developer, so I am no expert in CSS. But I do think I recall that floating elements are kind of "ignored" in a way. Can anyone give a detailed description of what is going on and how to fix it?

解决方案

Adding an overflow in this case with a value of hidden or auto remedies the issue.

Check the fiddle below:

http://jsfiddle.net/XMrwR/

Clearing floats the overflow way

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

这篇关于放在浮动元素周围的边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！