关于display:inline-block布局导致错位对不齐的问题

关于display:inline-block布局导致错位对不齐的问题


是这样的,前段时间,帮一个客户做的一个网站模块,需要两个div模块放在一起,对齐,虽然可以用浮动,但我没有用,就用了display:inline-block,但就出现了下面这个问题,如图:(为了让大家看清效果,我加了边框border


image

出现了错位,当时我的代码是这样写的

左边的div盒子是这样写的

.zcwa {
  1.    display: inline-block;

  2.    width: 60%;

  3.    border: 1px solid #000;

}


右边的div盒子是这样写的


.zclogo {
  1.    display: inline-block;

  2.    width: 38%;

  3.    border: 1px solid #000;

}



虽然排在了一排,但是就是对不齐,其实是我们少写了一个(vertical-align


左边加一个,写一个就可以了,我写了两个。


image


image


看看最后做好的效果,果然排排的对齐了


image



微信扫码咨询
建站咨询
cache
Processed in 0.010329 Second.