优艾设计网

css对齐的问题??

优艾设计网 https://www.uibq.com 2023-04-15 18:36 出处:网络 作者:磨皮美容教程
使用float和width对齐,但是发现并不在同一行? <div class=\"friends\"> <div class=\"friends-item\"> <div class=\"item-logo\"> <img src=\"images/999pic_5281c33cbc368.jpg\" alt=\"\"

使用floatwidth对齐,但是发现并不在同一行?

<div class="friends"> <div class="friends-item"> <div class="item-logo"> <img src="images/999pic_5281c33cbc368.jpg" alt="" style="heigh优艾设计网_设计百科t: 50px;"/> </div> <div class="item"> <div class="item-user"> <a href="#">哈哈哈</a> </div> <p>不是吧,今天居然要上课!


胡楚裕 2022-06-06 08:09

优艾设计网_设计百科

不需要 float 吧,对齐用 vertical-align


鄂双 2022-06-06 08:09

float就不用display了,inlineblock本来就是显示在一行的。或者给父元素加display:flex,两个子标签分别加flex:20%和f优艾设计网_平面设计lex:80%。


周彤 优艾设计网_设计模板 2022-06-06 08:14

去看看我的文章你就彻底明白了https://segmentfault.com/a/11...


长柳飞风占星月 2022-06-06 08:32

其实问题的关键出在boder:1px 或者更明确一点:出在题主对于标准盒模型的的理解上,标准盒模型中,width是不包含border的,然而,你先是设置了 .item-logo.item 的宽分别是20% 和80%,题主的愿意本来是想让这两个占满这一行,但是因为加了border,所以.item-logo.item 的实际宽度应该是20%+2px(左右border各1px) 和80%+2px(左右border各1px) 所以一行是放不下的,因为两个元素都设置了浮动,所以在这种情况下,.item元素实际上会移到下一行,题主可以通过设置.item为70% 或者设置border:优艾设计网_电脑技术0来验证一下


0

精彩评论

暂无评论...
验证码 换一张
取 消