Hallo zusammen,
mir gelingt es gerade nicht, mithilfe von Online-Tutorials folgende Aufgabe zu lösen:
Die benachbarten Container sollen immer gleich hoch sein und sich somit horizontal aneinander ausrichten, also z. B. würde „first right“ die Höhe von „first left“ annehmen und dadurch „second right“ nach unten auf die Höhe von „second left“ drücken usw.
Ich kann das mit Javascript lösen, aber mit CSS bekomme ich es nicht hin. Ist es überhaupt machbar?
Hier noch der Code meines bisherigen Versuchs:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flex</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.flex-container {
background-color: #E9F0E8;
padding: 1rem;
border-radius: 4px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: start;
}
.inside {
margin: 0 0 1rem;
padding: .5rem;
border-radius: 4px;
}
.inside:last-of-type {
margin: 0;
}
.first {
background-color: #C8DDC5;
}
.second {
color: #fff;
background-color: #528C49;
flex-grow: 1;
}
.third {
background-color: #77A76F;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6">
<div class="flex-container">
<div class="inside first">first left<br>first<br>first</div>
<div class="inside second">second left</div>
<div class="inside third">third left</div>
</div>
</div>
<div class="col-md-6">
<div class="flex-container">
<div class="inside first">first right</div>
<div class="inside second">second right<br>second<br>second<br>second<br>second<br>second<br>second</div>
<div class="inside third">third right<br>third</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Vielen Dank und Grüße
Felix
.....