html - 为什么在添加文本时 HTML 页面的布局会发生变化

Question

如果你看my test site您将看到一个 WordPress 站点。在主页上，有一个包含 9 个帖子的“工具箱”部分。我希望布局为 3 x 3，但它显示为 3/1/3/2 并且没有明显的原因。

如果我将一行 html 更改为测试字符串，那么它们会显示为 3 x 3。该行显示的是帖子摘录，我看不到任何额外的格式设置。

从 HTML 来看，这两个不同的页面是相同的。两者都有一个

<p>some text here</p>

我已经尝试了短测试数据、长测试数据等，看起来都很好。就在我使用“get_the_excerpt();”的时候然后布局被丢弃。

我已尝试使用 F12 开发工具，但我看不出问题所在。

Answer 1

在 .blog-post 的 css 中，您需要设置高度。那是因为您启用了 float 属性并且它们具有不同的高度，因此它会将它们放在合适的位置。

我查看了您的代码，我相信 200 像素的高度就足够了。但是您可以根据需要更改它。 给你:

.blog-post {
    float: left;
    width: 274px;
    height: 200px;
    margin: 0px 69px 60px 0px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}

还有其他解决方案。比如将每 3 个放在一个 div 中，或者用它们制作一个表格，每行 3 个，宽度为 100%，text-align 属性设置为居中。