How Can I Prevent Layout Distortion Caused by Variable Height Floated Elements?

Layout Distortion with Variable Height Floated Elements

When working with variable height elements in a floated layout, it's not uncommon to encounter situations where taller elements push subsequent siblings downwards, breaking the intended grid structure.

Consider the following example: six figure elements are designed to form two rows of three. However, due to the varying heights of the elements, the fourth figure element extends beyond the first row, causing the fifth and sixth elements to be offset.

The CSS used for this example is straightforward:

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

To address the layout distortion, we can introduce a CSS rule that specifically targets the first element of each row. By clearing the left float, we ensure that subsequent siblings are aligned horizontally below them.

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

This rule solves the alignment issue by forcing the fourth figure element to start a new row. The fifth and sixth elements are subsequently positioned correctly below the first three.

The updated example layout is now as intended, with each row consisting of three evenly spaced figure elements, regardless of their height differences.

The above is the detailed content of How Can I Prevent Layout Distortion Caused by Variable Height Floated Elements?. For more information, please follow other related articles on the PHP Chinese website!