使用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>不是吧,今天居然要上课!?</p>
<div class="item-url">
<div class="item-url-image">
<img src="images/cbd.jpg" alt="" />
</div>
<div class="item-url-detail">
<p style="margin-bottom: 0;">大润发购物广场11月7日(星期一</p>
</div>
</div>
</div>
</div>
</div>
.item-logo {
float: left;
display: inline-block;
width: 20%;
border: 1px solid red;
}
.item {
float: left;
display: inline-block;
width: 80%;
border: 1px solid red;
}
求解?
其实问题的关键出在
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来验证一下