我认为这可以通过浮动图像来完成,但我想看看我是否也可以使用我在本网站上看到的建议答案来做到这一点。在图像和span标签上使用inline-block
,并使用垂直对齐将文本放在图像旁边。图像文字内联和停止文字环绕
我遇到的问题是,如果我在span
标记后面添加一个段落,或者在span
标记中放置了太多单词,则所有文本都会在图像下方环绕。当我使用段落时,我尝试了不同的属性,但那不行。
JSFiddle是here。
.iconswrapper {
background-color: peachpuff;
margin: auto;
height: 150px;
margin-top: 15px;
width: 90%;
text-align: center
}
.otherinfo {
line-height: 2em;
font-size: 1.5em
}
.wrapcon {
text-align: left;
width: 75%;
background-color: #F6F6F6;
padding: 3px 0 0 5px;
margin-left: 10%;
}
.icon img {
width: 60px;
height: 50px;
display: inline-block;
vertical-align: middle
}
.icontitle {
font-size: 1.1em;
display: inline-block;
vertical-align: top
}
<div class="iconswrapper">
<span class="otherinfo">Other Services</span>
<div class="wrapcon">
<div class="icon">
<img class="docs" src="https://i1.ytimg.com/vi/lqKYnb77jHY/default.jpg" />
<span class="icontitle">Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck...</span>
</div>
</div>
如果使用内嵌式地显示块是不可能的,没有人知道是什么的选项除了浮动图像,并使用clearfix?
什么是填充工具用于计算... JavaScript的方法(跨浏览器兼容)? –
@AlexanderDixon因为['calc()'](http://caniuse.com/#feat=calc)一直工作到IE9,所以没有看到使用polyfill的任何点...虽然这里是一个: https://github.com/closingtag/calc-polyfill – LGSon