为什么添加文本时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

在css for .blog-post中你需要设置一个高度。这是因为你将float属性设置为活动状态并且它们具有不同的高度，因此它将它们放在适合的位置。

我查看了你的代码，我相信200px的高度就足够了。但是你可以根据需要改变它。 你走了：

.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中，或者用一个宽度为100％的行创建一个带有3个的表，并将text-align属性设置为center。