已经将img大小设定了，为什么media-body部分内容不左移动？-慕课网

已经将img大小设定了，为什么media-body部分内容不左移动？

来源：7-17 媒体对象--媒体对象列表

汤姆家的鱼

2016-12-18 22:23

<!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%，可是浏览器显示效果仅仅是将图片变小了，可是右边文字部分还没有左移

写回答关注

5回答

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" 就可以了

0 0
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的外边距

0 0
qq_馒头_29

2017-08-21 11:18:44

你的好好学一下什么是，行内元素，什么是块级元素，你对一个行内元素设宽度，当然不行了

0 0
汤姆家的鱼

2016-12-20 19:37:22

@Slience丶我的意思是那个头像缩小后怎么出现了红框所示那么大一段间隙。

0 0
Slience丶

2016-12-19 22:01:15

将第一个a标签的pull-left改成pull-right

1 0

汤姆家的鱼

我问的是怎么去掉图片与文字之间的空隙，如下图，并不是将头像右浮动。谢谢你的回答。

2016-12-20 19:33:55

共 1 条回复 >

玩转Bootstrap（基础）

告诉你使用Bootstrap，并且能够独立定制出适合自己的Bootstrap

314543 学习 · 2275 问题

查看课程

相似问题

移除body的margin声明设置body的背景色为白色？

回答 4

没看懂，为什么margin-left:10px会直接让图移动到了左边。

回答 4

移动设备

回答 2

label标签不是已经放置在”form-group”容器中了吗。。。为什么说没有放呢？

回答 4

如何想改变图片的大小，只需设置标签，width属性值及可，会自动调整大小，不需要设置height,为什么？

回答 1

打开慕课网App查看更多内容