css的inline-block布局方式对齐问题 —— 转载自 article/2023/7/31 16:26:21

发布时间 2023-08-01 14:31:13作者: 午夜·bicycle

css的inline-block布局方式对齐问题

今天在实现百度前端技术学院的如下案例时遇到了div上下对齐问题。

针对如下左右两栏布局,本来使用将两栏各自div的display设置为inline-block方式来实现,为了左边高度与右边对齐,直接量出右边div按照像素高度赋给左边。
但是左边元素竟然出现在了下边,没有与右边上下对齐。

这是百度给的标准案例

这是我的出问题的状态,可以看到简历一栏靠下了
后来经过百度与实验发现,将设置为inline-block时候,div并不能根据div边缘来对齐,而是根据里面的文字来对齐。很难通过设置文字对齐方式和调padding大小来达到对齐效果。
最终将两个div设置为float将问题解决。