只要用到栅格,就注意要清除浮动,清除方法就是在父元素的class上加一个clearfix
1.情景:
.
<div class="col-sm-7"> <div class="news-list"> <div class="news-list-item "> <div class="col-xs-5"> <img src="img/002.jpg"> </div> <div class="col-xs-7"> <a href="#" class="title">2年前他为教育事业和高圆圆分手,今成这般,高圆圆:我有一句MMP如鲠在喉</a> <div class="info"> <span><span class="avatar"><img src="img/logo.jpg"></span>王花花</span>⋅ <span>25k评论</span>⋅ <span>10分钟前</span> </div> </div> </div> <div class="news-list-item"> <div class="col-xs-5"> <img src="img/003.jpg"> </div> <div class="col-xs-7"> <a href="#" class="title">2年前他为教育事业和高圆圆分手,今成这般,高圆圆:我有一句MMP如鲠在喉</a> <div class="info"> <span><span class="avatar"><img src="img/logo.jpg"></span>王花花</span>⋅ <span>25k评论</span>⋅ <span>10分钟前</span> </div> </div> </div>
出现这样的原因:主要是没有清除浮动
解决办法:
只需在父类上添加clearfix就可以了
即:<div class="news-list-item clearfix">
结果: