当一个元素向左浮动时，如何防止其他元素右对齐？
[编辑]感谢herkulano 和 格曼森< /a> 他的修复对我有用。
但我无法决定哪个更好、更可靠并且跨浏览器兼容？ “溢出”或“clearfix：？请帮我解决这个问题，我很高兴。
如果我的问题不清楚，现在就清楚了。请继续阅读...
（我正在尝试在
1. 以下是我正在使用的 CSS 代码：
#gallerythumbnailsx { margin: 10px; }
#gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; }
#gallerythumbnailsx img { border: 2px solid #cfcfcf; margin-left: 5px; }
#gallerythumbnailsx .gallery-caption { margin-left: 0; }
2. 使用的相关 php 代码是：
<div id="gallerythumbnailsx"><?php echo show_all_thumbs(); ?></div>
<p>Aahan is great!</p>
3. 结果 HTML 的显示方式如下：
<div id="gallerythumbnailsx">
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx.jpg"></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx1.jpg"></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx3.jpg"></a>
</dt>
</dl>
</div>
不幸的是，这就是它的显示方式（屏幕截图）。正如您所看到的，问题在于，由于我使用 float: left 作为缩略图，文本“Aahan is beautiful!”被推到了缩略图的右侧。在 CSS 中，我希望文本换行。
[EDIT] Thanks to herkulano and GerManson whose fixes worked for me.
But I am unable to decide which is better, reliable and cross-browser compatible? "overflow" or "clearfix:? Please help me with this, and I am good to go.
If my question is not clear, it will be, now. Just read on please...
(I am trying to display some thumbnails in php and these are the respective codes I am using.)
1. The following is the CSS code that I am using:
#gallerythumbnailsx { margin: 10px; }
#gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; }
#gallerythumbnailsx img { border: 2px solid #cfcfcf; margin-left: 5px; }
#gallerythumbnailsx .gallery-caption { margin-left: 0; }
2. related php code used is:
<div id="gallerythumbnailsx"><?php echo show_all_thumbs(); ?></div>
<p>Aahan is great!</p>
3. This is how the resultant HTML is displayed:
<div id="gallerythumbnailsx">
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx.jpg"></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx1.jpg"></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx3.jpg"></a>
</dt>
</dl>
</div>
Unfortunately this is how it is being displayed (screenshot). The issue as you can see, is that the text "Aahan is great!" is being pushed to the right of the thumbnails since I use float: left for thumbnails in the CSS. I want the text in a new line.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
将
p{clear:left;}添加到您的 CSS很棒的文章解释所有浮动
为您添加了 JSFiddle
这使用了现有的CSS（它忽略了
#gallerythumbnailsx .gallery-caption { margin-left: 0; }和#gallerythumbnailsx .gallery-item { float: left; text-align: center; /code> 因为我不明白为什么你需要它们。add
p{clear:left;}to your CSSawesome article explaining all floats
Added a JSFiddle for you
This uses the existing CSS (well it ignores the
#gallerythumbnailsx .gallery-caption { margin-left: 0; }and#gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; }since I don't see why you would need em.这将解决它，希望
This will fix it, hopefully
另一种方法是在#gallerythumbnailsx上使用clearfix方法，它是跨浏览器的，这样您就可以在其他地方重用它，只需在使用浮动的地方添加clearfix类即可。
我做了一个工作示例： http://jsfiddle.net/XhRk6/
.clearfix util 类取自： http://html5boilerplate.com/
Another way is to use the clearfix method on #gallerythumbnailsx it is cross-browser and this way you can reuse it elsewhere, just add the clearfix class where you use floats.
I made a working example: http://jsfiddle.net/XhRk6/
The .clearfix util class was taken from: http://html5boilerplate.com/