已經將img大小設定了,為什么media-body部分內容不左移動?
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>媒體對象--媒體對象列表</title> <link?rel="stylesheet"?> </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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>? </body> </html>
第一個li里面的img,我給設定了寬度變小至55%,可是瀏覽器顯示效果僅僅是將圖片變小了,可是右邊文字部分還沒有左移
2017-08-21
你如果想中間的10px不要,也很簡單,因為pull-left,原本就是向做浮動,現在這個pull-left在media中就個給他添加了一個向右的外邊距,如下media > .pull-left {?margin-right: 10px;};那現在就很明白了,你直接取消pull-left,然后直接在后面寫一個樣式?style="float:left" 就可以了
2017-08-21
還有為什么圖片和文字中間有間隙,因為
.media > .pull-left {
?margin-right: 10px;
}
.media > .pull-right {
?margin-left: 10px;
}
每個media-object中的<a>標簽都加了pull-right或者還是pull-left,然后有10px的外邊距
2017-08-21
你的好好學一下什么是,行內元素,什么是塊級元素,你對一個行內元素設寬度,當然不行了
2016-12-20
@Slience丶 ? ? ? ? 我的意思是那個頭像縮小后怎么出現了紅框所示那么大一段間隙。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
2016-12-19
將第一個a標簽的pull-left改成pull-right