css的inline-block布局方式对齐问题_div display:inline-block后,如何一个靠左对齐,一个靠右对齐

作者：花生_TL007 | 2024-03-23 14:30:49

踩

div display:inline-block后,如何一个靠左对齐,一个靠右对齐

今天在实现百度前端技术学院的如下案例时遇到了div上下对齐问题。
针对如下左右两栏布局，本来使用将两栏各自div的display设置为inline-block方式来实现，为了左边高度与右边对齐，直接量出右边div按照像素高度赋给左边。
但是左边元素竟然出现在了下边，没有与右边上下对齐。
这是百度给的标准案例
这是我的出问题的状态，可以看到简历一栏靠下了
后来经过百度与实验发现，将设置为inline-block时候，div并不能根据div边缘来对齐，而是根据里面的文字来对齐。很难通过设置文字对齐方式和调padding大小来达到对齐效果。
最终将两个div设置为float将问题解决。

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】