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

当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列时下一行第一个元素

(推荐学习:CSS视频教程

二、或者给父元素定义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; 
}

更多CSS3相关技术文章,请访问CSS3答疑栏目进行学习!

以上就是float元素高度不一致导致错位怎么解决?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏