我有一个图像,文本就在它旁边浮动。它适用于大型桌面。但当我缩小设备尺寸时,文本就不再垂直地很好地浮动了。基本上,文本位于图像下方,并占据整行。如何使文本始终向右浮动(垂直对齐良好),而不考虑设备尺寸/图像高度??我有引导模板,所以响应性是我网站的关键。我知道我可以让我的形象更大,但这不适合我的网站布局。
我的小提琴…Fiddle
HTML格式:
<div class="wrapper">
<div class="img"><img alt="" src="http://placehold.it/150x150"></div>
<div class="model">
Mercedes
</div>
<div class="description">
the best the best the best the best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the best bestthe best the best the bestthe best the best the bestthe best the best the bestbestthe best the best the bestthe best the best the bestthe best the best the best
</div>
</div>
CSS:
.img {
height:75px;
width:75px;
padding:0 0 5px 45px;
position:relative;
word-wrap:break-word;
float:left;
display:inline-block
}
.img img {
max-width:100%;
max-height:100%;
left:0;
position:absolute;
margin-top:17px
}
.model {
font-size:12px;
color:#5A5A5A;
padding:0 0 10px 55px;
width:100%
}
.description {
font-size:14px;
margin-top:10px;
font-weight:400
}
最佳答案
你说你用的是鞋带。为什么不使用media对象而不是创建一个额外的css?
请阅读以下内容以供参考:http://getbootstrap.com/components/#media
请看这个片段。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="media">
<div class="media-left">
<img src="http://placehold.it/150x150" >
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
关于html - 即使文字低于图像也可以使文字 float ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30270528/