简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Mengapa verticalalign:textbottom dan verticalalign:bottom mempunyai kesan yang sama?
P粉633309801
P粉633309801 2024-04-02 09:45:45
0
1
361

Kedudukan garis dasar kotak baris dipengaruhi oleh semua elemen dalam baris. 

      .short-box {
        width: 30px;
        height: 30px;
        background-color: pink;
        display: inline-block;
      }
      .box {
        background-color: bisque;
        margin-bottom: 10px;
      }
      .tall-box {
        width: 30px;
        height: 100px;
        background-color: pink;
        display: inline-block;
      }
      .text-bottom {
        vertical-align: text-bottom;
      }
      .text-top {
        vertical-align: text-top;
      }

      .bottom {
        vertical-align: bottom;
      }
      .top {
        vertical-align: top;
      }

  <body>
    <div class="box">
      x
      <span class="tall-box text-bottom"></span>
      <span class="short-box"></span>
    </div>
    <div class="box">
      x
      <span class="tall-box text-top"></span>
      <span class="short-box"></span>
    </div>
    <div class="box">
      x
      <span class="tall-box bottom"></span>
      <span class="short-box"></span>
    </div>

    <div class="box">
      x
      <span class="tall-box top"></span>
      <span class="short-box"></span>
    </div>
  </body>
</html>

Kenapa kotak pertama dan kotak ketiga mempunyai kesan yang sama, tetapi kotak kedua dan kotak keempat mempunyai kesan yang berbeza. Bagaimanakah sifat penjajaran menegak mengubah garis dasar kotak garisan?

P粉633309801
P粉633309801

membalas semua(1)
P粉674757114
P粉6747571142024-04-03 00:32:45 Tingkat 1

Ringkasnya, kerana kotak pendek menonjol di atas kotak kandungan induk, tetapi tidak menonjol di bawah kotak kandungan induk.

Berikut ialah imej dengan kotak dan baris yang berkaitan ditambah:

Dalam setiap kes, segi empat tepat hijau menunjukkan tempat kotak garis, segi empat tepat biru menunjukkan tempat kotak kandungan induk dan garis merah menunjukkan tempat garis dasar.

Sekarang kita dapat melihat bahawa dalam kes satu dan tiga, kotak tinggi dijajarkan dengan text-bottom 和 bottom masing-masing, dan bahagian bawah kotak kandungan induk dan bahagian bawah kotak baris bertepatan. Oleh itu, penjajaran setiap menyelesaikan kepada susunan yang sama.

Dalam kes dua dan empat, kotak tinggi dijajarkan dengan text-top 和 top masing-masing, dan bahagian atas kotak kandungan induk dan bahagian atas kotak baris tidak bertepatan, jadi reka letaknya tidak sama. p>

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！