本文探讨了四种实现同一行元素顶端对齐的方法：1) inline-block元素的默认对齐及其缺点；2) 使用绝对定位进行精确对齐；3) 浮动元素以实现对齐及避免margin影响；4) 利用flex布局的简便性和灵活性。推荐对flex布局进一步学习。
1.同一行的行内块状元素inline-block默认的都是顶端对齐
<style>
<span style="white-space:pre"> </span>.div1,.div2,.div3{display:inline-block;width:100px;height:}
.div1{height:100px;background:#ccc;}
.div2{height:150px;background:#e44;}
.div3{height:200px;background:#237FAD;}
</style>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
但是这样有一个缺点，如果其中一个设置了margin，那么其他的都会随着一起动，例如给div2添加一个margin-top，其他的两个也都下来了
<style>
.div1,.div2,.div3{display:inline-block;width:1
最低0.47元/天 解锁文章
2050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
