複数のブロックレベルの要素を同じ行に配置したい場合、生徒が最初に考えるのはフローティングですが、答えは「ノー」です。ここでは、Xiaoqiang 先生が 5 つのレイアウト方法をまとめ、皆様のお役に立てれば幸いです。
この方法は最も簡単で、CSS を学ぶ際に習得しなければならないスキルでもあります。単に li を float にするだけです。
コードは次のとおりです:
; タイトル> 背景: ピンク;
Web ページのレイアウトでは、多くの場所で、フローティングや配置を行わずに標準フローを使用できることがわかっています。インラインブロックは標準ストリームに属するため、フローティングや位置決めよりも安定しています。
たとえば、淘宝網:
コードは次のとおりです:
/* 親ボックスに font-size: 0 を追加して、デフォルトの空白を削除します*/}
li{width: 200px;height: 200px; background:pink; margin-left: 10px;
display: inline-block;/* インライン ブロックの変換*/ font-size: 12px;/* フォント サイズを元に戻す*/}
効果は次のとおりです。
4番目のメソッド: table-cell
display:table は table 要素に変換するメソッドであることがわかります。 display:table-cell は cell 要素に変換されます
