Issue
I'm trying to make a website but ran into a problem. I need to align elements from div boxes to a vertical line. Something like in the picture (don't question my paint skills)
Here's my code:
<div class="main-block">
<div class="sub-block">
<a class="part1">(light gray block)</a>
<a class="part2">(dark gray block)</a>
</div>
</div>
I need to keep the .part1
and .part2
in .sub-block
div.
Solution
Table layout can do this:
.main-block {
display:table;
}
.sub-block {
display:table-row;
}
.sub-block > * {
display:table-cell;
padding:10px;
}
.part1 {
text-align:right;
}
<div class="main-block">
<div class="sub-block">
<a class="part1">aaa</a>
<a class="part2">bb</a>
</div>
<div class="sub-block">
<a class="part1">a a aaaaa</a>
<a class="part2">b</a>
</div>
<div class="sub-block">
<a class="part1">aaaaaaaaaaaaa</a>
<a class="part2">(dark gray block)</a>
</div>
<div class="sub-block">
<a class="part1">a</a>
<a class="part2">bbbbbbbbbb</a>
</div>
</div>
Answered By - Temani Afif Answer Checked By - Cary Denson (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.