Bagaimana Menjajarkan Elemen Terapung Pembolehubah Ketinggian Secara Menegak Tanpa Mengubah Suai Saiz Intrinsiknya?

Cara Menjajarkan Elemen Terapung bagi Ketinggian Pembolehubah Secara Menegak

Dalam bekas yang dijajar mendatar, terapung cenderung menjajar ke atas secara lalai. Apabila berurusan dengan unsur ketinggian yang tidak diketahui dan berbeza-beza, penjajaran ini boleh membawa kepada hasil yang tidak konsisten dan tidak diingini. Matlamatnya ialah untuk mencari kaedah untuk memusatkan elemen apungan ini secara menegak tanpa mengubah saiz intrinsiknya.

Sekatan Terapung

Apungan dihadkan dalam penjajaran menegaknya disebabkan penyemak imbas spesifikasi. Peraturan #8 tingkah laku apungan CSS menetapkan bahawa apungan mesti diletakkan setinggi mungkin. Ini bermakna penjajaran menegak terus terapung tidak dapat dicapai.

Menggunakan Pembungkus Blok Sebaris

Untuk memintas sekatan ini, kami boleh menggunakan elemen blok sebaris untuk membalut kami unsur apungan. Elemen blok sebaris mewujudkan Konteks Pemformatan Blok (BFC), membenarkannya mengandungi terapung. Dengan memberikan sifat penjajaran menegak pembalut ini, kami boleh mengawal kedudukan elemen apungan kami.

Pelaksanaan

1. Sisipkan setiap elemen apungan dalam blok sebaris pembungkus.
2. Tetapkan sifat paparan pembungkus ini kepada sekatan sebaris.
3. Tentukan sifat penjajaran menegak untuk pembungkus menjajarkannya secara menegak.
4. Pastikan bahagian luar bekas mempunyai ketinggian yang mencukupi untuk menampung elemen apungan yang dijajar menegak.

Contoh

<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>

Pendekatan ini secara berkesan memusatkan unsur apungan yang berbeza-beza ketinggian tanpa bergantung pada sifat paparan div luar. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa beberapa ruang mungkin muncul di antara pembungkus blok sebaris.

Atas ialah kandungan terperinci Bagaimana Menjajarkan Elemen Terapung Pembolehubah Ketinggian Secara Menegak Tanpa Mengubah Suai Saiz Intrinsiknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!