两个非空的元素inline-block化后出现空白部分解决办法时间:2023-03-09 15:15:29 在涉及到两个<div>元素并列显示的效果时,一般有两种方法: 1.使用float元素让元素并联显示; 2.将块状的<div>元素display设置为inline-block,使其成为线性块状元素,从而具备线性元素的特点,达到并列显示目的; 由于float元素具有:脱离文本流以及使父元素高度塌陷的特性,谨防对后续布局产生影响,故不选用; 但是,将<div>元素inline-block化,由于两个元素遵循其默认的基线对齐的方式,故两个并列显示的<div>元素出现空白部分(如下图) 要解决这个问题,可: 1.将两个<div>元素display:inline-block后,将其vertical-align对齐方式设置为top或者bottom; 2.将第二个<div>元素设置样式:font-size:0;后期再对第二个<div>中的内容的字体分个设置即可; 效果图如下: 两个<div>元素已对齐;空白部分消失 上一篇:jps 命令详解下一篇:String与Int类型的转换