• 技术文章 >web前端 >css教程

    float高度不一致导致错位怎么解决

    藏色散人藏色散人2021-01-26 09:37:04原创290

    float高度不一致导致错位的解决办法:1、给换行开始的第一个元素加上“clear:left;”;2、给父元素定义“font-size:0;”,再定义“display:inline-block;vertical-align:top;”即可。

    本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑。

    推荐:css视频教程

    当N个元素浮动后,会导致错位的问题。一般给元素一个固定的height就没有这个现象,下面与大家分享下当高度不一致时的解决方法。

    float元素高度不一致导致错位怎么解决?

    一、解决方法是给换行开始的第一个元素加上 clear:left; 即可。

    例如 四列时应该时第5个、9个...加clear:left;

    .row .col-lg-3:nth-child(4n+1),
    .row .col-md-3:nth-child(4n+1){
        clear:left;
    }

    4n+1 选择一行4列时下一行第一个元素

    二、或者给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top;

    ul{ 
        margin:0; 
        padding:0; 
        list-style-type:none; 
        font-size:0; 
    } 
    ul li{ 
        width:160px; 
        display:inline-block; 
        vertical-align:top; 
        font-size:12px; 
    }

    以上就是float高度不一致导致错位怎么解决的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:float
    上一篇:响应式布局有几种方法 下一篇:为什么css放上面js放下面
    第16期线上培训班

    相关文章推荐

    • CSS中float属性怎么使用• CSS布局中flex、grid以及float属性之间的差别是什么• float浮动造成父级元素塌陷的解决方法• css中float什么意思• 如何解决css float错位问题

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网