Home > Web Front-end > CSS Tutorial > How Can I Prevent Layout Distortion Caused by Variable Height Floated Elements?

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

Susan Sarandon
Release: 2024-12-22 18:56:14
Original
638 people have browsed it

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%; }
Copy after login

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;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template