Das mag einfach sein, aber ich weiß nicht, wie ich es beheben kann.

Ich verwende Bootstrap5.

Vollständiger Code hier: https://www.codeply.com/p/BywuhLNUXy

Es scheint, dass Codeply einige Probleme hat ... Also habe ich es auch auf jsfiddle gesetzt

https://jsfiddle.net/paul_z/y7a6dnkf/1/

Hauptsächlich die Kontaktverzeichnisseite. Die Codestruktur ist

 
 
 
 
 
 
  
 
 
 user 1
 
CDD IT Informatique
 
 
 ###
 
 mail
 
 phone
 
 
 
 
 
 ...

Auf dem großen Bildschirm werden zwei Karten in Spalten angezeigt.

Das Problem ist, dass die Karten teilweise unterschiedliche Höhen haben. Für Benutzer 2 ändert sich beispielsweise seine Rolle zu: „Enseignant Chercheur Astrophysicalque Hautes Energies“ statt „CDD IT Informatique“, sodass diese Zeile zwei Zeilen statt einer erfordert. Die Karte von Benutzer 2 hat also eine andere Höhe als die anderen Karten.

Wie kann ich es lösen? Ich kenne die Größe der Karte nicht, daher kann ich sie nicht implizit reparieren (was wahrscheinlich sowieso keine gute Idee ist).

P.S.: Ich hätte das gleiche Problem, wenn die Logos unterschiedliche Größen hätten. Einige Logos ändern die Höhe der Karte, obwohl img-fluid, widht, max-widht, max-height usw. verwendet werden. Aber ich denke, zuerst muss ich das einfache Höhenproblem lösen.

Code snippet .card { height: 100%; } This will set the height of all cards to 100% of their parent container. This will ensure that all cards have the same height, regardless of the content inside them. To fix the problem of the logos having different sizes, you can use the following CSS: Code snippet .card img { max-width: 100%; max-height: 100%; object-fit: cover; } This will set the maximum width and height of the logos to 100%. This will ensure that the logos are never larger than their parent container. The object-fit: cover property will ensure that the logos are scaled to fill their container, without distorting their aspect ratio. I hope this helps

.card { height: 100%; }