在浮动元素周围放置边框

发布于 2024-12-24 02:54:52 字数 650 浏览 2 评论 0原文

假设我有类似以下代码的内容，我想在左右浮动的两个图像之间显示一些文本。

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

我想在两个图像和文本周围添加边框。我尝试在上述所有 3 个标签周围放置

并使用 style="border:2px blacksolid;"。虽然这增加了边框，但似乎没有考虑到图像。也就是说，我们得到如下内容（使用 StackOverflow 和 Google 徽标）。

在此处输入图像描述

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

原文

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

enter image description here

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吃→可爱长大的 2024-12-31 02:54:52

在这种情况下添加一个值为 hidden 或 auto 的 overflow 可以解决该问题。

检查下面的小提琴：

http://jsfiddle.net/XMrwR/

清除浮动溢出方式
http://www.quirksmode.org/blog/archives/ 2005/03/clearing_floats.html

回复收藏 0 原文

ㄖ落Θ余辉 2024-12-31 02:54:52

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

In CSS, floated elements do not add height to a parent by default.

The solution is simply to set 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>

fiddle: http://jsfiddle.net/JNets/

回复收藏 0 原文