css中文字加圖片的布局實現(xiàn)
發(fā)布時間：2013-09-06 11:35:47 作者：佚名 
我要評論
我要評論在文章中難免會出現(xiàn)表情，在在這種情況下如何以比較合理的方式顯示文字與表情呢？其實很簡單，通過簡單幾行CSS樣式便可實現(xiàn)，感興趣的朋友可以了解下
html:
<div class="messagebox">
<span class="message">aaaaa<img src="e1.png">bbbbbbbbbbbbb<img src="e2.png">cccc</span>
</div>
css:
.messagebox
{
width: 300px;
height: auto;
word-wrap: break-word;
word-break:break-all;
white-space: pre-wrap;
background-color: #333;
padding: 0px;
margin:0px;
}
.message
{
font-size: 30px;
width: 300px;
height: auto;
}
img
{
width: 60px;
height: 50px;
}
效果圖：
復制代碼
代碼如下:<div class="messagebox">
<span class="message">aaaaa<img src="e1.png">bbbbbbbbbbbbb<img src="e2.png">cccc</span>
</div>
css:
復制代碼
代碼如下:.messagebox
{
width: 300px;
height: auto;
word-wrap: break-word;
word-break:break-all;
white-space: pre-wrap;
background-color: #333;
padding: 0px;
margin:0px;
}
.message
{
font-size: 30px;
width: 300px;
height: auto;
}
img
{
width: 60px;
height: 50px;
}
效果圖：
相關文章
CSS實現(xiàn)動態(tài)圖片的九宮格布局的實例代碼
這篇文章主要介紹了CSS實現(xiàn)動態(tài)圖片的九宮格布局的實例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-03css3 圖片圓形顯示 如何CSS將正方形圖片顯示為圓形圖片布局
這篇文章主要為大家介紹了正方形圖片使用CSS如何實現(xiàn)成圓形布局，不使用PS軟件處理，直接使用DIV CSS布局如何實現(xiàn)圖片圓形化，具體實現(xiàn)過程請看下文2014-10-10DIV+CSS中讓布局、背景圖片、文字內(nèi)容居中的方法
這篇文章主要為大家介紹了在DIV+CSS布局的頁面里，讓布局、背景圖片、文字內(nèi)容居中的方法，從布局內(nèi)容到頁面里文章文字居中都是非常重要的，而css來設置居中也是非常簡單的2014-10-09- input框中有圖片的情況下如何使用css實現(xiàn)，為了美觀、形象，一般都會在用戶名，密碼等輸入框中加一個圖片，其實很簡單，具體的實現(xiàn)如下，感興趣的朋友可以參考下2013-08-01
- 這只是一個布局實例，學習CSS有用處，因為這個用來修飾圖片的邊框做的不錯，主要是想了解如何用CSS實現(xiàn)這種布局，在相對、絕對定位，或者是在多種瀏覽器不失真、不2009-11-04
純css實現(xiàn)朋友圈不同數(shù)量圖片不同布局，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-06-10
