圖像文字內聯和停止文字環繞

Question

我認爲這可以通過浮動圖像來完成，但我想看看我是否也可以使用我在本網站上看到的建議答案來做到這一點。在圖像和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？

Answer 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>

Answer 2

添加下面的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>

Answer 3

如果從跨度，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>