微信小程序圖片右邊加兩行文字的代碼
更新時(shí)間：2020年04月23日 11:03:23 作者：wy313622821
這篇文章主要介紹了微信小程序圖片右邊加兩行文字的代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
圖片右邊加兩行文字
先來(lái)一個(gè)效果圖：
下面來(lái)看代碼
wxml
<view class="view_tupian_wenzi"> <image class="image_1" src="../images/main_yewu.png" /> <view class="view_wenzi2"> <text>服務(wù)項(xiàng)目</text> <text class="text_small">進(jìn)入服務(wù)項(xiàng)目，查看項(xiàng)目數(shù)據(jù)</text> </view> </view>
wxss代碼
.view_tupian_wenzi {
display: flex;
flex-direction: row;
margin-left: 10px
}
.image_1 {
width: 50px;
height: 50px;
}
.view_wenzi2 {
width: 90px;
margin-left: 5px;
display: flex;
flex-direction: column;
}
.text_small{
font-size: 27rpx;
word-break:break-all;
color: #7a7878
}
ps：下面接著看下如何實(shí)現(xiàn)圖片和兩行文字在一行顯示
給你個(gè)例子- -
html
<div class="wrap"> <img src="images/ico.png" alt=""> <span>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.</span> </div>
css
.wrap {
/* 可無(wú)需設(shè)置高度，靠圖片高度 或者 文字的上下padding撐開(kāi)高度 */
border: 1px solid;
width: 600px;
text-align: center;
}
.wrap span{
display: inline-block;
vertical-align: middle;
padding: 20px 0; /* 撐開(kāi)高度 */
}
.wrap img{
width: 10px;
height: auto;
vertical-align: middle;
}
其實(shí)多行居中分很多情況的- -只有行內(nèi)元素，只有行內(nèi)替換元素，行內(nèi)與行內(nèi)替換混合，建議去好好看看vertical-align與基線相關(guān)資料。
就樓主這個(gè)需求，還有其他更容易的實(shí)現(xiàn)方式，比如：
1、flex彈性盒子（移動(dòng)端）
2、使用表格布局
到此這篇關(guān)于微信小程序圖片右邊加兩行文字的代碼的文章就介紹到這了,更多相關(guān)微信小程序文字在圖片右邊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
H5+C3+JS實(shí)現(xiàn)五子棋游戲（AI篇）
這篇文章主要為大家詳細(xì)介紹了H5+C3+JS實(shí)現(xiàn)五子棋游戲AI篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
今天小編就為大家分享一篇解決layer.prompt無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
原生js實(shí)現(xiàn)可愛(ài)糖果數(shù)字時(shí)間特效
本文主要介紹了原生js實(shí)現(xiàn)可愛(ài)糖果數(shù)字時(shí)間特效的實(shí)例代碼，附效果展示和代碼演示。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2016-12-12
js中把JSON字符串轉(zhuǎn)換成JSON對(duì)象最好的方法
這篇文章主要介紹了js中把JSON字符串轉(zhuǎn)換為JSON對(duì)象最好的方法,需要的朋友可以參考下2014-03-03
all是一個(gè)集合，包含所有html對(duì)像的集合，寫(xiě)一個(gè)程式，可以存取到所有的對(duì)像。2008-11-11
這篇文章主要介紹了JS清除選擇內(nèi)容的方法,較為詳細(xì)的分析了js操作文本的技巧,需要的朋友可以參考下2015-01-01
小程序相信大家應(yīng)該都很熟悉了,對(duì)于小程序的整個(gè)運(yùn)營(yíng)的方法,很多運(yùn)營(yíng)都比較關(guān)注,今天希望通過(guò)一個(gè)思維導(dǎo)圖,這篇文章主要給大家介紹了關(guān)于小程序中如何繪制思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2021-10-10
深入理解事件冒泡(Bubble)和事件捕捉(capture)
下面小編就為大家?guī)?lái)一篇深入理解事件冒泡(Bubble)和事件捕捉(capture)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
JSONP解決JS跨域問(wèn)題的實(shí)現(xiàn)
這篇文章主要介紹了JSONP解決JS跨域問(wèn)題的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼,以實(shí)例形式實(shí)現(xiàn)了包括Tab,選項(xiàng)卡,橫向等效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09