css对齐的问题？ 财富值5

2016-11-05 12:03发布

站内问答 /
5377 4 3

使用float和width对齐，但是发现并不在同一行？

<div class="friends">             <div class="friends-item">                 <div class="item-logo">                     <img src="images/999pic_5281c33cbc368.jpg" alt="" style="height: 50px;"/>                 </div>                 <div class="item">                     <div class="item-user">                         <a href="#">哈哈哈</a>                     </div>                     <p>不是吧，今天居然要上课！
友情提示: 此问题已得到解决，问题已经关闭,关闭后问题禁止继续编辑，回答。
4条回答
fengxiaocai - 这个人很懒，什么都没留下
2016-11-05 12:25

其实问题的关键出在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来验证一下

一周热门 更多>