源自：7-17 媒体对象--媒体对象列表
已经将img大小设定了，为什么media-body部分内容不左移动？
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>媒体对象--媒体对象列表</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <ul class="media-list"> <li class="media"> //这里我给img设定了宽度变小，可是浏览器显示效果仅仅是将图片变小了，可是右边文字部分还没有左移 <a class="pull-left"><img style="width:55%;" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031"></a> <div class="media-body"> <h4 class="media-heading">我是大漠</h4> <p>这种方法的实现对图片是有要求的，如果图片比较大从效果上看是没任何作用的</p> </div> </li> <li class="media"> <a class="pull-left"><img src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0"></a> <div class="media-body"> <h4 class="media-heading">慕课网</h4> <p>这种方法的实现对图片是有要求的，如果图片比较大从效果上看是没任何作用的</p> </div> </li> <li class="media"> <a class="pull-left"><img src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1"></a> <div class="media-body"> <h4 class="media-heading">W3cplus</h4> <p>这种方法的实现对图片是有要求的，如果图片比较大从效果上看是没任何作用的</p> </div> </li> </ul> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
第一个li里面的img，我给设定了宽度变小至55%，可是浏览器显示效果仅仅是将图片变小了，可是右边文字部分还没有左移
提问者：汤姆家的鱼
2016-12-18 22:23
个回答
-
- qq_馒头_29
- 2017-08-21 11:54:03
你如果想中间的10px不要，也很简单，因为pull-left，原本就是向做浮动，现在这个pull-left在media中就个给他添加了一个向右的外边距，如下media > .pull-left { margin-right: 10px;}；那现在就很明白了，你直接取消pull-left，然后直接在后面写一个样式 style="float:left" 就可以了
-
- qq_馒头_29
- 2017-08-21 11:32:54
还有为什么图片和文字中间有间隙，因为
.media > .pull-left {
margin-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
}每个media-object中的<a>标签都加了pull-right或者还是pull-left，然后有10px的外边距
-
- qq_馒头_29
- 2017-08-21 11:18:44
你的好好学一下什么是，行内元素，什么是块级元素，你对一个行内元素设宽度，当然不行了
-
- 汤姆家的鱼
- 2016-12-20 19:37:22
@Slience丶 我的意思是那个头像缩小后怎么出现了红框所示那么大一段间隙。
-
- Slience丶
- 2016-12-19 22:01:15
将第一个a标签的pull-left改成pull-right