Bekas yang melimpah dengan kanak-kanak yang sama tinggi
P粉207969787
P粉207969787 2024-03-22 13:42:51
0
2
722

Saya mencari soalan yang tersedia tetapi tidak menemui penyelesaian.

Saya cuba menetapkan ketinggian semua elemen bekas limpahan mendatar supaya sama dengan ketinggian elemen terpanjang.

body {
    
}
section{
    width: 300px;
    background: lightblue;
    overflow: auto;
    white-space: nowrap;
}
div{
    display: inline-block ;
    max-width: 150px;
    background: lightgreen;
    margin: 5px;
    white-space: normal;
    
    /* not working */
    height: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <section>
            <div>
                hi there how are you push just IV by Rd hi TX cu
            </div>
            <div>
                hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi
            </div>
            <div>
                hi there how are you push just IV by Rd hi TX cu
            </div>
        </section>
    </body>
</html>

Seperti yang anda lihat, div kedua adalah yang paling panjang. Div yang lain hendaklah sama dengan div kedua. Juga, saya tidak memerlukan ketinggian tetap.

P粉207969787
P粉207969787

membalas semua(2)
P粉790819727

Anda boleh menggunakan susun atur Flex.

section{
  width: 300px;
  background: lightblue;
  overflow: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
div{
  display: inline-block ;
  max-width: 150px;
  background: lightgreen;
  margin: 5px;
  white-space: normal;
  height: 100%;
}
P粉403821740

tidak boleh dibalut divs 上设置 min-width 并使其父级 flex.

section {
  display: flex; /* new */
  flex-wrap: nowrap; /* new */
  width: 300px;
  background: lightblue;
  overflow: auto;
}

div {
  min-width: 150px; /* new */
  background: lightgreen;
  margin: 5px;
}
hi there how are you push just IV by Rd hi TX cu
hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi
hi there how are you push just IV by Rd hi TX cu
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan