cari

Rumah  >  Soal Jawab  >  teks badan

Pastikan bekas sel jadual memenuhi keseluruhan ketinggian induk

Saya cuba menjajarkan kandungan secara menegak tanpa menggunakan Flexbox, kerana terdapat beberapa masalah dengan kes penggunaan kami, jadi saya cuba mencapainya menggunakan jadual yang dijajarkan secara menegak, tetapi masalahnya ialah kandungan di dalamnya tidak memenuhi ketinggian yang tinggal, adalah ia mungkin melalui CSS ke Beberapa cara untuk melakukan ini?

https://jsfiddle.net/s38haqm5/25/

<html>

  <body>
    <div class="row">
      <div class="cell">
        <div class="container">
          Hello world
        </div>
      </div>
      <div class="cella">
        Cell2
      </div>
    </div>

  </body>

</html>


.container {
  background-color: red;
  height: 100%; 
}

.cell {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  min-width: 100px;
  max-width: 100px;
  min-height: auto;
  max-height: none;
}

.cella {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  min-width: 100px;
  max-width: 100px;
  height: 30px;
  max-height: none;
}

.row {
  display: table
}

P粉345302753P粉345302753242 hari yang lalu510

membalas semua(1)saya akan balas

  • P粉183077097

    P粉1830770972024-04-05 10:41:43

    Anda perlu menentukan ketinggian ibu bapa. Kini .cell 没有设置任何高度，因此 .container anda tidak mempunyai sebarang nilai untuk dikira 100%. Hanya pergi ke ketinggian yang sama dengan .cell 添加一些高度，例如 .cell {height: 30px;} （就像您在 .cella. )

    Memandangkan .cella 和 .cell adalah sama, saya mengandaikan anda mungkin mahukan sedikit nasihat ini. Jika anda mahu sel menjadi sama tetapi salah satu daripadanya perlu digayakan secara berbeza, tambahkan kelas yang sama pada semua sel dan kemudian tambah id pada sel yang perlu berbeza dan kemudian gayakan id seperti yang anda mahu . Ingat, sel dengan kelas dan id akan mempunyai nilai css yang terdiri daripada gabungan kelas dan id

    balas
    0
  • Batalbalas