微信小程序怎么让多个view处在同一行

绝地灬酷狼 2023-06-02 15:54 11阅读 0赞

# view布局 #

首先，在一个view里面嵌套多个view

<view class="head">
      
        <view class="touxiang">
            <image src="/images/touxiang.jpg"></image>
        </view>
          
        <view>    
              
        	<view>
                欧世乐    
        	</view>    
            
        	<view>
              计科N171    
        	</view>  
        </view>
     </view>

# 效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70]

# CSS代码 #

.head{
          display: flex;}

# 效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70]: /images/20230601/242e612aa5d34a35a048b7daaf688cdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 1]: /images/20230601/e9e43f332bee4a9fad2cc7b764686fbf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序<view>和div

在 HTML 中，div 是一个块级元素，可以用来对文档进行布局。在微信小程序中，view 是一个视图容器，具有相同的作用，但是它的样式和布局与浏览器有所不同。通常来说，vie

我会带着你远行/ 2023年10月08日 19:27/ 0 赞/ 49 阅读

相关微信小程序怎么让多个view处在同一行

view布局首先，在一个view里面嵌套多个view <view class="head">  <view

绝地灬酷狼/ 2023年06月02日 15:54/ 0 赞/ 12 阅读

相关微信小程序scroll-view

<scroll-view scroll-y style="height: 100%;"> <view class="green" style="width:

分手后的思念是犯贱/ 2023年03月13日 03:29/ 0 赞/ 63 阅读

相关怎么让span与img在同一行

![20171220211858963][] 在img样式加： display:inline-block; <div class="navbar-head

青旅半醒/ 2022年06月03日 06:27/ 0 赞/ 380 阅读

相关微信小程序 - 豆瓣同城

> 代码地址如下： > [http://www.demodashi.com/demo/12121.html][http_www.demodashi.com_demo_121

ゝ一纸荒年。/ 2022年05月29日 13:07/ 0 赞/ 219 阅读

相关微信小程序view叠加效果

需要实现如下效果： ![叠加效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

小灰灰/ 2022年02月21日 06:45/ 0 赞/ 1014 阅读

相关微信小程序 - 使用scroll-view

前言使用scroll-view时，轴横向移动不生效设置一、设置scroll-x="true" 二、设置height 三、在scroll-vi

﹏ヽ暗。殇╰゛Y/ 2021年09月30日 03:14/ 0 赞/ 327 阅读

相关微信小程序之view布局

.wxml ![Image 1][] .wxss ![Image 1][] 几个不同效果是view的属性不同产生的 ![Image 1][] ![Ima

怼烎@/ 2021年09月18日 03:02/ 0 赞/ 535 阅读

相关微信小程序web-view实例

![标题图][1240] 微信小程序`web-view`实例 `index.js` //index.js //获取应用实例 const app

旧城等待，/ 2021年09月16日 20:02/ 0 赞/ 459 阅读

相关微信小程序动态添加多个view组件

微信小程序动态添加多个view组件和网站动态添加多个div的方式有点不一样。网站动态添加多个div的方式可参考链接：[https://blog.csdn.net/Charl

秒速五厘米/ 2021年09月15日 10:40/ 0 赞/ 1193 阅读