In the application, I have implemented a flexbox layout similar to the code snippet below, containing a group of li elements with three divs in each.
.container {
width: 500px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
border: solid 1px black;
flex: 1;
}
.title {
border: solid 1px red;
margin-bottom: 1em;
}
.content {
border: solid 1px yellow;
margin-bottom: 1em;
}
.footer {
border: solid 1px blue;
}<div class="container">
<ul>
<li>
<div class="title">
Blah Blah Blah Blah Blah Blah
</div>
<div class="content">
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</div>
<div class="footer">
Some other stuff here
</div>
</li>
<li>
<div class="title">
Blah Blah Blah Blah Blah Blah
</div>
<div class="content">
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</div>
<div class="footer">
Some other stuff here
</div>
</li>
<li>
<div class="title">
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</div>
<div class="content">
Blah Blah Blah Blah Blah Blah Blah Blah
</div>
<div class="footer">
Some other stuff here
</div>
</li>
</ul>
</div>I am in search of a way to ensure that the child divs align horizontally across all columns. For instance, the yellow div tops are aligned, as well as the blue div tops. My previous method involved absolute positioning of the child divs with fixed heights and tops. However, setting fixed heights results in a lot of empty space within the columns, especially on responsive pages where the layout changes.
Most solutions I have come across involve JavaScript or restructuring the HTML markup to prioritize rows over columns. I prefer to maintain the column structure, which supports 1, 2, or 3 columns, and also adapt to a carousel on smaller devices.
Is there a way to achieve this without resorting to JavaScript, or am I limited to that approach?