CSS を使用して等間隔の DIV を含む流動的なレイアウトを作成するには?

等間隔の DIV を使用した流体の幅

等間隔の DIV を使用した流体レイアウトを実現するには、次のアプローチを使用できます。採用:

CSS

#container {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

これにより、テキストの配置が「両端揃え」に設定され、コンテンツが利用可能な幅全体に均等に配置されます。

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  vertical-align: top;
}

display: inline-block を設定すると、DIV はインライン要素として動作し、内部で水平に流れます。 container.

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

「ストレッチ」要素が追加されて、残りのスペースを埋め、DIV を目的の位置に押し込みます。フォントと行の高さをクリアすると、一部のブラウザで役立ちます。

HTML

<div>

ストレッチ要素により、DIV が流体コンテナ全体に均一かつ応答よく分散されます。

以上がCSS を使用して等間隔の DIV を含む流動的なレイアウトを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。