フロート高さのばらつきによる位置ずれ問題の解決方法

フロートの高さの不一致による位置ずれの解決策: 1. 改行から始まる最初の要素に「clear:left;」を追加します; 2. 親要素に「font-size:0;」を定義します。そして「display:inline-block;vertical-align:top;」を定義するだけです。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。

推奨: css ビデオ チュートリアル

N 個の要素が浮動すると、位置ずれの問題が発生します。通常、要素の高さを一定にしておけばこの現象は発生しませんが、高さが一定でない場合の解決策を紹介します。

float 要素の高さの不一致によって引き起こされる位置ずれを解決するにはどうすればよいですか?

1. 解決策は、改行から始まる最初の要素に clear:left; を追加することです。

たとえば、4 列ある場合、5 番目と 9 番目の列にする必要があります...clear:left;

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

4n を追加します 1 4 列の行を選択する場合、最初の列は次の行の要素

2. または、親要素に font-size:0 を定義し、浮動子要素に必要な font-size を定義してから、display:inline-block;vertical-align: を定義します。トップ;

レリー

以上がフロート高さのばらつきによる位置ずれ問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。