2016-06-10 88 views
1

我认为这可以通过浮动图像来完成,但我想看看我是否也可以使用我在本网站上看到的建议答案来做到这一点。在图像和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?

回答

1

您可以使用CSS表,其中有浏览器支持IE8 +,置容器display:table,而列display:table-cell

顺便说一下,您的HTML缺少</div>,请确保解决该问题。

jsFiddle

.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 { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.docs, 
 
.icontitle { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.docs { 
 
    width: 60px; 
 
    height: 50px; 
 
} 
 
.icontitle { 
 
    font-size: 1.1em; 
 
    margin-left: 4px; 
 
}
<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> 
 
</div>

1

添加下面的CSS规则:

.icon { 
    display:flex; 
} 

看到下面的代码:

.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 
 
} 
 
.icon { 
 
    display:flex; 
 
}
<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... Duck Cleaning. If you need a duck... Duck Cleaning. If you need a duck...</span> 
 
    </div> 
 
    </div> 
 
</div>

1

如果从跨度,calc(100% - 68px)取出图像的宽度,它会按预期工作,如果没有,跨度将会增长以填补其父母宽度,因此断线。

.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; 
 
    width: calc(100% - 68px); 
 
}
<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... 
 
     Duck Cleaning. If you need a duck... 
 
     </span> 
 
    </div> 
 
    </div>

+0

什么是填充工具用于计算... JavaScript的方法(跨浏览器兼容)? –

+0

@AlexanderDixon因为['calc()'](http://caniuse.com/#feat=calc)一直工作到IE9,所以没有看到使用polyfill的任何点...虽然这里是一个: https://github.com/closingtag/calc-polyfill – LGSon