Ant-design: Artikel mit gleicher Höhe

Ich verstehe nicht，Was bedeutet a lot of layout issues ?

Zeilenhöhe === max(Col height), damit keine Layoutprobleme auftreten. https://codesandbox.io/s/my8p6vk7wj

Ich meine, fügen Sie eine Funktion hinzu, um die Spalten (und andere Elemente) innerhalb einer Zeile gleich hoch zu machen.

Dein Beispiel sieht derzeit so aus:

Aber es wäre schön, <Row equal-heights> hinzuzufügen und der Inhalt wird so angezeigt:

Ich verstehe ... Es sieht vernünftig aus.

Vielleicht vertical-fill besser anrufen?

Ich glaube nicht, dass wir das brauchen, die Größe der Kinder sollte den Inhalten der Kinder oder ihrem Stil überlassen werden.

@yutingzhao1991 @ddcat1115 Ich habe die gleichen Probleme. Hat jemand eine Lösung dafür?

Irgendeine Lösung zu diesem Thema?

Nö

Die Verwendung von flexbox-aktivierten Zeilen mit type="flex" und das Einstellen der Höhe auf 100% des Spalteninhalts hat für mich gut funktioniert.

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

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

Danke Alvin. Es funktioniert für mich, type='flux' zu setzen. Aber vergessen Sie nicht, auch beim Spalteninhalt die Höhe auf 100 % zu setzen. Nicht Spalte selbst, es sollte die Komponente unter Spalte sein.

Ich habe Karten in meinem Raster. Das Setzen des Zeilentyps auf "flux" und die Höhe der Karte auf "100%" (wie in diesem Thread vorgeschlagen) funktioniert perfekt in dem Sinne, dass jede Karte die volle Höhe der Zeile ausfüllt. Die Aktionsleiste der Karte befindet sich jedoch nicht mehr unten in der Reihe. Es sieht aus wie das:

Wie kann ich Karten in einem Raster haben, das sich bis zur Höhe der Reihe ausdehnt, und mit den Kartenaktionsschaltflächen am unteren Rand der Reihe?

im Meta-Tag können Sie eine Klasse hinzufügen und Ihre feste Höhe angeben. Mögen

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

CSS:

.cardBodyStyle {
    height: 100px;
}

Die Verwendung von flexbox-aktivierten Zeilen mit type="flex" und das Einstellen der Höhe auf 100% des Spalteninhalts hat für mich gut funktioniert.

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

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

das ist der richtige weg

Versuchen Sie diesen Ansatz, um den untergeordneten Knoten auf den gesamten verfügbaren Platz zu dehnen (vertikal und 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>

Bei mir hat keines davon funktioniert. Die Lösung bestand darin, height: 100% zu entfernen und display: inline-flex und align-self: stretch auf Col-Tags zu setzen. Wenn Sie mehrere Elemente in Col haben, müssen Sie sie in einen anderen Container einschließen, damit Col nur ein untergeordnetes Element hat.