固有のサイズを変更せずに、可変高さの浮動要素を垂直方向に整列させるにはどうすればよいですか?

Susan Sarandon
リリース: 2024-11-01 07:25:30
オリジナル
244 人が閲覧しました

How to Vertically Align Floating Elements of Variable Heights Without Modifying Their Intrinsic Sizing?

可変高さのフローティング要素を垂直方向に整列させる方法

水平方向に整列されたコンテナでは、フローティング要素はデフォルトで上部に整列する傾向があります。未知のさまざまな高さの要素を扱う場合、この調整により一貫性のない望ましくない結果が生じる可能性があります。目標は、これらの float 要素の固有のサイズを変更せずに、これらの float 要素を垂直方向の中央に配置する方法を見つけることです。

Float の制限

Float は、ブラウザーによって垂直方向の配置が制限されています。仕様。 CSS の float 動作のルール #8 では、float をできるだけ高い位置に配置する必要があると規定しています。これは、フロートの直接の垂直方向の位置合わせができないことを意味します。

インライン ブロック ラッパーの使用

この制限を回避するには、インライン ブロック要素を利用して、フロート要素。インライン ブロック要素はブロック フォーマット コンテキスト (BFC) を確立し、フロートを含めることができます。これらのラッパーに垂直方向の整列プロパティを与えることで、float 要素の位置を制御できます。

実装

  1. 各 float 要素を inline-block 内に囲みます。 Wrapper.
  2. これらのラッパーの表示プロパティを inline-block に設定します。
  3. ラッパーを垂直方向に揃えるには、ラッパーのvertical-align プロパティを指定します。
  4. 外側のコンテナには、垂直方向に整列した float 要素を収容するのに十分な高さがあります。

<code class="css">.float-left {
  float: left;
}

.float-right {
  float: right;
}

#main {
  border: 1px solid blue;
  margin: 0 auto;
  width: 500px;
}

#main > div {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}</code>
ログイン後にコピー
<code class="html"><div id="main">
  <div>
    <div class="float-left">
      <p>AAA</p>
    </div>
  </div>
  <div>
    <div class="float-right">
      <p>BBB</p>
      <p>BBB</p>
    </div>
  </div>
</div></code>
ログイン後にコピー

このアプローチは、さまざまな float 要素を効果的に垂直方向に中央に配置します。外側の div の表示プロパティに依存せずに高さを調整します。ただし、インラインブロックラッパーの間にスペースが生じる可能性があることに注意することが重要です。

以上が固有のサイズを変更せずに、可変高さの浮動要素を垂直方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!