微信小程序圖片右邊加兩行文字的代碼
更新時(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與基線(xiàn)相關(guān)資料。
就樓主這個(gè)需求，還有其他更容易的實(shí)現(xiàn)方式，比如：
1、flex彈性盒子（移動(dòng)端）
2、使用表格布局
到此這篇關(guān)于微信小程序圖片右邊加兩行文字的代碼的文章就介紹到這了,更多相關(guān)微信小程序文字在圖片右邊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
JavaScript格式化日期時(shí)間的方法和自定義格式化函數(shù)示例
JavaScript默認(rèn)的時(shí)間格式我們一般情況下不會(huì)用，所以需要進(jìn)行格式化，下面說(shuō)說(shuō)我總結(jié)的JavaScript時(shí)間格式化方法2014-04-04
這篇文章主要介紹了詳解可以用在VS Code中的正則表達(dá)式小技巧，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)打字機(jī)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
討論html與javascript在瀏覽器中的加載順序問(wèn)題
這篇文章主要是對(duì)html與javascript在瀏覽器中的加載順序問(wèn)題進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JavaScript實(shí)現(xiàn)矩形塊大小任意縮放
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)矩形塊大小任意縮放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
在本篇內(nèi)容中小編給各位分享的是關(guān)于如何使用JS控制下拉列表左右選擇的實(shí)例代碼，需要的朋友們可以參考下。2020-05-05
javascript中Class(類(lèi))的介紹和使用方法
在JavaScript中類(lèi)(Class)是一種創(chuàng)建對(duì)象的模板,它可以用來(lái)定義對(duì)象的屬性和方法,這篇文章主要給大家介紹了關(guān)于javascript中Class(類(lèi))的介紹和使用方法的相關(guān)資料,需要的朋友可以參考下2024-05-05
js中net::ERR_FILE_NOT_FOUND報(bào)錯(cuò)的解決
本文主要介紹了js中net::ERR_FILE_NOT_FOUND報(bào)錯(cuò)的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
JavaScript 事件冒泡簡(jiǎn)介及應(yīng)用
這篇文章有助于大家認(rèn)識(shí)事件冒泡的一些知識(shí)。2010-01-01
js實(shí)現(xiàn)圖片旋轉(zhuǎn) js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片旋轉(zhuǎn),滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小等效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07