如何解决如何将元素对齐到垂直线
我正在尝试制作网站,但遇到了问题。我需要将元素从 div 框对齐到垂直线。像图片中的东西(不要质疑我的绘画技巧)
这是我的代码:
<div class="main-block">
<div class="sub-block">
<a class="part1">(light gray block)</a>
<a class="part2">(dark gray block)</a>
</div>
</div>
我需要将 .part1
和 .part2
保留在 .sub-block
div 中。
解决方法
表格布局可以做到这一点:
.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。