I have this CSS
#question {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
border:1px dotted red;
}
.opt {
height: 24px;
margin-bottom:8px;
}
and this HTML. (The number of nested can change.)
<div id="question">
<div id="opt1" class="opt"></div>
<div id="opt2" class="opt"></div>
<div id="opt3" class="opt"></div>
<div id="opt4" class="opt"></div>
<div id="opt5" class="opt"></div>
</div>
I don't want a margin under the last visible nested DIV so I tried
.opt:last-child {
margin-bottom:0;
}
which works. But if the flex order is changed then the last visible DIV
is no longer #opt5 and so the "wrong" DIVs do/dont haves a
margin-bottom. Is this something that can be solved with CSS or do I
need to use coding?
Sysop: | Keyop |
---|---|
Location: | Huddersfield, West Yorkshire, UK |
Users: | 292 |
Nodes: | 16 (2 / 14) |
Uptime: | 180:01:10 |
Calls: | 6,616 |
Calls today: | 3 |
Files: | 12,165 |
Messages: | 5,314,120 |