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