Question

[编辑] 感谢herkulano和GerManson，其修复程序对我有用。

但我无法确定哪个更好，更可靠并且跨浏览器兼容？ “溢出”或“clearfix :?请帮我这个，我很高兴。

如果我的问题不明确，那就是现在。请继续阅读...

（我试图在php中显示一些缩略图，这些是我正在使用的相应代码。）

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>

不幸的是，这就是它的显示方式（screenshot）。你可以看到的问题是“Aahan很棒！”这个文字。由于我在CSS中使用float: left缩略图，因此被推到缩略图的右侧。我希望文本换行。

Answer 1

将p{clear:left;}添加到您的CSS

awesome article explaining all floats

为您添加了JSFiddle

这使用了现有的CSS（它忽略了#gallerythumbnailsx .gallery-caption { margin-left: 0; }和#gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; }因为我不明白为什么你需要它。

Answer 2

这将解决它，希望

#gallerythumbnailsx { margin: 10px; overflow: auto; }

Answer 3

另一种方法是在#gallerythumbnailsx上使用clearfix方法，它是跨浏览器的，这样你可以在其他地方重用它，只需在你使用浮点数的地方添加clearfix类。

我做了一个有效的例子：http://jsfiddle.net/XhRk6/

.clearfix util类取自：http://html5boilerplate.com/

当一个元素向左浮动时，如何防止其他元素正确对齐？

3 个答案: