Ant-design: Item dengan tinggi yang sama

Dibuat pada 28 Jan 2018 · 14Komentar · Sumber: ant-design/ant-design

Masalah apa yang dipecahkan fitur ini?

Saat menggunakan komponen Kartu, akan sangat bagus untuk menambahkan dukungan untuk ketinggian yang sama. Demikian pula, saat menggunakan Baris dan Kol, jika kita dapat menambahkan dukungan untuk ketinggian yang sama pada semua anak dari item Baris, itu akan menyelesaikan banyak masalah tata letak.

Seperti apa tampilan API yang diusulkan?

<Row equal-heights> atau serupa

Sumber

studioraygun

Komentar yang paling membantu

Menggunakan baris yang diaktifkan flexbox dengan type="flex" dan mengatur ketinggian ke 100% pada konten kolom bekerja dengan baik untuk saya.

<Row gutter={16} type="flex">

https://ant.design/components/grid/#Row

alvin pada 28 Okt 2018

👍29 👎7

Semua 14 komentar

Saya tidak mengerti，Apa artinya a lot of layout issues ?

Tinggi baris === max(Tinggi col) sehingga tidak akan membawa masalah tata letak. https://codesandbox.io/s/my8p6vk7wj

yutingzhao1991 pada 29 Jan 2018

Maksud saya tambahkan fitur untuk membuat kolom (dan elemen lainnya) sama tingginya di dalam satu baris.

Contoh Anda saat ini terlihat seperti ini:

screen shot 2018-01-29 at 09 33 56

Tetapi akan lebih baik untuk menambahkan <Row equal-heights> dan kontennya muncul seperti ini:

screen shot 2018-01-29 at 09 35 56

studioraygun pada 29 Jan 2018

👍10

Begitu... Kelihatannya masuk akal.

Mungkin menelepon vertical-fill lebih baik?

yutingzhao1991 pada 29 Jan 2018

Saya tidak berpikir kita membutuhkan ini, tinggi anak-anak harus diserahkan kepada konten anak-anak atau gayanya.

afc163 pada 1 Feb 2018

👎89

@yutingzhao1991 @ddcat1115 Saya mendapatkan masalah yang sama. Adakah yang punya solusi untuk itu?

birendra-90 pada 8 Sep 2018

Setiap resolusi tentang masalah ini?

sgwcollins pada 27 Sep 2018

tidak

birendra-90 pada 28 Sep 2018

Menggunakan baris yang diaktifkan flexbox dengan type="flex" dan mengatur ketinggian ke 100% pada konten kolom bekerja dengan baik untuk saya.

<Row gutter={16} type="flex">

https://ant.design/components/grid/#Row

alvin pada 28 Okt 2018

👍29 👎7

Terima kasih Alvin. Ini berfungsi bagi saya untuk mengatur type='flux'. Tapi jangan lupa juga untuk mengatur ketinggian menjadi 100% pada isi kolom. Bukan kolom itu sendiri, itu harus menjadi komponen di bawah kolom.

youlinaXealth pada 12 Mar 2019

👍4 ❤1

Saya memiliki Kartu di grid saya. Menyetel jenis baris ke "fluks" dan tinggi kartu ke "100%" (seperti yang disarankan di utas ini) berfungsi dengan baik dalam arti bahwa setiap kartu memenuhi ketinggian penuh baris. Namun, bilah tindakan kartu tidak lagi berada di bagian bawah baris. Ini terlihat seperti ini:

Bagaimana saya bisa memiliki kartu dalam kotak yang meluas ke ketinggian baris, dan dengan tombol tindakan kartu di bagian bawah baris?

rsrogers4 pada 6 Mei 2019

di tag Meta Anda dapat menambahkan kelas dan menentukan tinggi tetap Anda. Suka

<Card>
 <Meta  
  className="cardBodyStyle"
  title={key.title}
  description={key.description}
 />
</Card>

css:

.cardBodyStyle {
    height: 100px;
}

dianaabv pada 21 Agu 2019

Menggunakan baris yang diaktifkan flexbox dengan type="flex" dan mengatur ketinggian ke 100% pada konten kolom bekerja dengan baik untuk saya.
<Row gutter={16} type="flex">
https://ant.design/components/grid/#Row

ini cara yang benar

milad1367 pada 27 Jan 2020

Coba pendekatan ini untuk meregangkan simpul anak ke semua ruang yang tersedia (secara vertikal dan horizontal)

<Row gutter={16}>
    <Col span={12} style={{display: 'flex'}}>
        <Card style={{flex:1}}>
            1<br/>2<br/>3
        </Card>
    </Col>
    <Col span={12} style={{display: 'flex'}}>
        <Card style={{flex:1}}>
            1<br/>2
        </Card>
    </Col>
</Row>

pavloneiman pada 20 Mei 2020

❤1 👍1

Bagi saya, tidak satu pun dari ini yang berhasil. Solusinya adalah menghapus height: 100% dan mengatur display: inline-flex dan align-self: stretch pada tag Col. Jika Anda memiliki beberapa elemen di dalam Col, Anda harus membungkusnya dalam wadah lain sehingga Col hanya memiliki satu anak.