爲什麼添加文本時HTML頁面的佈局會發生變化

如果你看看my test site，你會看到一個WordPress網站。在主頁上，有一個包含9個帖子的「工具箱」部分。我期望的佈局是3 x 3，但它顯示爲3/1/3/2，並沒有明顯的原因。爲什麼添加文本時HTML頁面的佈局會發生變化

如果我將一行html更改爲測試字符串，則它們顯示爲3 x 3.該行顯示帖子摘錄，並且沒有額外的格式可以顯示。

從查看HTML，兩個不同的頁面是相同的。兩者有一個

<p>some text here</p>

我已經試過短的測試數據，長時間的測試數據ECT，而這一切看起來很好。這只是當我使用「get_the_excerpt（）;」佈局然後被拋棄。

我曾嘗試使用F12開發工具，但我沒有看到問題是什麼。

來源

2013-10-20 Greg Gum

嘗試使用每行的div。所以三行各自包含三個帖子。 –

每行的div肯定會有幫助（也可能解決）...但是，它不應該是必需的。我沒有在控制檯中看到任何明顯的東西。奇。 – Bosworth99

問題是，第一個浮動元素在圖像下面有兩行文本，因此下面兩行更高。並且_since_您使用的是浮動，下一行的下一個元素浮動在第二個元素下面，因爲第一個空間可以浮動到可用空間中，而第一個浮動在第一個空間下方時，它將不得不「進一步下移」。 – CBroe

在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); 
}

也有其他的解決方案。就像把它們中的每一個放在一個div中，或者用寬度爲100％的一行中的3與它們一起製作一個表格，並將text-align屬性設置爲居中。

來源

2013-10-20 21:04:05

非常感謝，設置高度的工作很好。 –

爲什麼添加文本時HTML頁面的佈局會發生變化

回答

相關問題