How to solve the problem of misalignment caused by inconsistent float heights

Solutions to misalignment caused by inconsistent float heights: 1. Add "clear:left;" to the first element starting from the line break; 2. Define "font-size:0;" to the parent element, and then Just define "display:inline-block;vertical-align:top;".

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer.

Recommended: css video tutorial

When N elements float, it will cause misalignment problems. Generally, this phenomenon will not occur if you give the element a fixed height. Let me share with you the solution when the height is inconsistent.

How to solve the misalignment caused by inconsistent heights of float elements?

1. The solution is to add clear:left; to the first element starting from the newline.

For example, when there are four columns, it should be the 5th and 9th one...Add clear:left;

.row .col-lg-3:nth-child(4n+1),
.row .col-md-3:nth-child(4n+1){
    clear:left;
}

4n 1 When selecting a row of 4 columns, the first element of the next row

2. Or define font-size:0 for the parent element; define the required font-size for the floating child element, and then define display:inline-block;vertical-align:top;

ul{ 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    font-size:0; 
} 
ul li{ 
    width:160px; 
    display:inline-block; 
    vertical-align:top; 
    font-size:12px; 
}

The above is the detailed content of How to solve the problem of misalignment caused by inconsistent float heights. For more information, please follow other related articles on the PHP Chinese website!