複数のボックスを一列に配置する完全な方法 レスポンシブウェブレイアウト_html/css_WEB-ITnose

複数のブロックレベルの要素を同じ行に配置したい場合、生徒が最初に考えるのはフローティングですが、答えは「ノー」です。ここでは、Xiaoqiang 先生が 5 つのレイアウト方法をまとめ、皆様のお役に立てれば幸いです。

最初の方法: Floating メソッド

この方法は最も簡単で、CSS を学ぶ際に習得しなければならないスキルでもあります。単に li を float にするだけです。


コードは次のとおりです:

; タイトル> 背景: ピンク;

;/li>

中

2 番目の方法: 位置決め方法


この方法も可能ですが、あまり使用されません。



3 番目の方法: インライン ブロック メソッドに変換する

CSS 表示モードには、インライン表示モード (inline)、ブロック レベル表示モード (block)、およびインライン ブロック表示モード (inline-block) があることがわかっています

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 要素に変換されます