1. 問題
2. 解決策 1. クリア: 両方 最後のフロート要素の後に、clear:both; 属性を持つ要素を追加します。 <スタイル> div.parent>div.fl{ フロート: 左; 幅: 200ピクセル; 高さ: 200px; 右マージン: 20px; 境界線: 1px 実線の赤; } 。クリア{ クリア: 両方; } </スタイル> <div class="parent"> <div class="fl">1</div> <div class="fl">2</div> <div class="fl">3</div> <div class="fl">4</div> <div class="clear">5</div> </div> clear:both; 属性を持つ :after 疑似要素を親要素に追加します。 <スタイル> div.parent>div.fl{ フロート: 左; 幅: 200ピクセル; 高さ: 200px; 右マージン: 20px; 境界線: 1px 実線の赤; } .clear:after{ コンテンツ: ''; 表示: ブロック; クリア: 両方; } </スタイル> <div class="親クリア"> <div class="fl">1</div> <div class="fl">2</div> <div class="fl">3</div> <div class="fl">4</div> </div> 注: 擬似要素はデフォルトでインラインなので、擬似要素を使用する場合は、属性 display: block; を設定する必要があります。 2. オーバーフロー:自動 / オーバーフロー:隠し <スタイル> div.親{ オーバーフロー:自動; /*overflow: hidden; も動作します*/ } div.parent>div.fl{ フロート: 左; 幅: 200ピクセル; 高さ: 200px; 右マージン: 20px; 境界線: 1px 実線の赤; } </スタイル> <div class="parent"> <div class="fl">1</div> <div class="fl">2</div> <div class="fl">3</div> <div class="fl">4</div> </div> 3. フローティング親要素 <スタイル> div.親{ フロート: 左; } div.parent>div.fl{ フロート: 左; 幅: 200ピクセル; 高さ: 200px; 右マージン: 20px; 境界線: 1px 実線の赤; } </スタイル> <div class="parent"> <div class="fl">1</div> <div class="fl">2</div> <div class="fl">3</div> <div class="fl">4</div> </div> 注意: この方法は、親要素のレイアウトに問題が発生するため、通常は使用されません。 以上で、フローティング要素が原因のトラブルとその解決策についての記事は終了です。フローティング要素が原因のトラブルについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: JavaScript の 3 つの BOM オブジェクト
>>: VMware Workstation 仮想マシンのインストール操作方法
MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...
1. リンク解除機能ハード リンクの場合、unlink はディレクトリ エントリを削除し、inode...
<input> はユーザー情報を収集するために使用され、終了ステートメントはありません。...
目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...
FTP と SFTP はファイル転送プロトコルとして広く使用されています。関連する機能を開発するには...
HTML には、幅の異なる 5 つのスペース エンティティが用意されています。非改行スペース ( )...
目次JSIとはJSIの違いiOS で JSI を使用するiOS 設定RN側の構成jsはパラメータ付き...
この例では、Linux への Python 3.8 のインストールを例に挙げます。 1. 依存パッケ...
この記事では、すべてのチェックボックスを選択または解除するためのJavaScriptの具体的なコード...
テーブルの背景色は、BGCOLOR 属性を通じて設定できます。基本的な構文<テーブル BGCO...
序文Linux システムをインストールした後の最も一般的なタスクは、ネットワーク構成です。もちろん、...
MySql インデックスインデックスの利点1. 一意のインデックスまたは主キー インデックスを作成す...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
0. 新しい操作: mkdir abc #新しいフォルダを作成 touch abc.sh #新しいフ...
アップグレードプロセス:元のシステム: CentOS7.3 [root@my-e450 ~]# un...