您好,登錄后才能下訂單哦!
小編這次要給大家分享的是微信小程序如何實(shí)現(xiàn)圖片右邊加兩行文字,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
圖片右邊加兩行文字
先來一個(gè)效果圖:
下面來看代碼
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 { /* 可無需設(shè)置高度,靠圖片高度 或者 文字的上下padding撐開高度 */ border: 1px solid; width: 600px; text-align: center; } .wrap span{ display: inline-block; vertical-align: middle; padding: 20px 0; /* 撐開高度 */ } .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彈性盒子(移動端)
2、使用表格布局
看完這篇關(guān)于微信小程序如何實(shí)現(xiàn)圖片右邊加兩行文字的文章,如果覺得文章內(nèi)容寫得不錯(cuò)的話,可以把它分享出去給更多人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。