让div不独占一行


以  div  A 和 B为例,宽高为100px。

 

 

1、使div浮动起来,效果图如下

  

 

2、给 div 添加CSS属性  display:inline;

  但是这样会造成 div 的宽高无效,宽高是被 div 内的内容撑开的,效果如下图:

  

  使用  display:inline-block;  效果如下图:

  

  但是这样会产生一个新的问题,A 和 B 中间有一个缝隙

  这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合        并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

  解决方案:

  对父元素添加,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙 (div内的字同时消失)    

 效果图如下:

  

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM