如何防止可變高度浮動元素導致佈局扭曲？

可變高度浮動元素的佈局扭曲

在浮動佈局中使用可變高度元素時，遇到較高的情況並不罕見元素將後續的兄弟元素向下推，破壞了預期的網格結構。

考慮以下範例：六個圖形元素被設計成兩行，每行三個。然而，由於元素的高度不同，第四個圖形元素超出了第一行，導致第五和第六個元素偏移。

此範例使用的 CSS 很簡單：

figure { width: 30%; float: left; margin-left: 1%; font-size: small; outline: solid #999 1px; }
img { max-width: 100%; }

為了解決佈局扭曲問題，我們可以引入專門針對每行第一個元素的 CSS 規則。透過清除左側浮動，我們確保後續同級元素在它們下方水平對齊。

figure:nth-of-type(3n+1) {
    clear:left;
}

此規則透過強制第四個圖形元素開始新行來解決對齊問題。隨後，第五個和第六個元素正確地定位在前三個元素的下方。

更新後的範例佈局現在符合預期，每行由三個均勻間隔的圖形元素組成，無論它們的高度差異如何。

以上是如何防止可變高度浮動元素導致佈局扭曲？的詳細內容。更多資訊請關注PHP中文網其他相關文章！