微信小程序开发中怎么讲图片设置在左侧,文字设置在右侧
时间: 2024-05-09 19:15:04 浏览: 170
微信小程序图片右边加两行文字的代码
可以使用 flex 布局来实现图片在左侧,文字在右侧的效果。
HTML 结构大概是这样的:
```
<view class="container">
<image class="image" src="your-image-url"></image>
<view class="text">your text here</view>
</view>
```
CSS 样式可以这样设置:
```
.container {
display: flex;
flex-direction: row;
align-items: center;
}
.image {
width: 100px;
height: 100px;
margin-right: 10px;
}
.text {
flex: 1;
text-align: right;
}
```
这里的关键是使用了 flex 布局,将容器设置为 `row` 方向,并使用 `align-items: center` 属性将图片和文字垂直居中对齐。同时,图片的宽度和高度也要设置好,以达到最佳的显示效果。`text` 元素使用 `flex: 1` 属性占据剩余的空间,并使用 `text-align: right` 将文字靠右对齐。
阅读全文