微信小程序:布局样式

news2024/11/13 9:55:05

效果

wxml

<view class="layout">
    <view class="left">
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    </view>
    <view class="right">
      <view class="right-item1">2</view>
      <view class="right-item2">3</view>
    </view>
</view>

wxss

.layout {
  width: 100%;
  display: flex;

}
.left {
  width: 50%;
  background-color: #6ba2e0;
}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-item1 {
  flex: 1;
  background-color: #8bc34a;
}

.right-item2 {
  flex: 1;
  background-color: #ce8adf;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1308611.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机毕业设计 基于Web的城市旅游网站的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

发布jar包到maven中央仓库

1. 环境 在网上找的很多文章中写得都有很多问题&#xff0c;这里记录一下最近一次成功地发布jar包到maven中央仓库的过程。并附带上每一个步骤官方的指导链接。 系统&#xff1a;mac&#xff08;windows系统在下载辅助工具时不太一样&#xff0c;在配置上和mac系统没有区别&…

rk3568 RGMII KSZ8795 MAC TO MAC

RK3568与KSZ8795交换机芯片连接&#xff0c;直接MAC TO MAC方式&#xff0c;这样一下就扩展会4路网口&#xff0c;应该场合比较多&#xff0c;移植过程如下&#xff1a; 参考《Rockchip_Developer_Guide_Linux_MAC_TO_MAC_CN.pdf》 《rockchip RGMIImv88e6390 管理型交换机功…

【HarmonyOS】【DevEco Studio】安装教程及环境配置问题解决

目录 一、DevEco Studio 安装二、配置环境ohmp安装报错问题解决方法一&#xff1a;注册表删除数值&#xff08;没解决&#xff09;方法二&#xff1a;进入DevEco Studio点击Settings进入设置&#xff08;没解决&#xff09;方法三&#xff1a;自己去官网下载ohmp的包安装&#…

13.Spring 整合 Kafka + 发送系统通知 + 显示系统通知

目录 1.Spring 整合 Kafka 2.发送系统通知 2.1 封装事件对象 2.2 开发事件的生产者和消费者 2.3 触发事件&#xff1a;在评论、点赞、关注后通知​编辑 3.显示系统通知 3.1 通知列表 3.1.1 数据访问层 3.1.2 业务层 3.1.3 表现层 3.2 开发通知详情 3.2.1 开发数据…

mac安装pnpm与使用

1、什么是pnpm&#xff1f; pnpm 全称 performant npm&#xff0c;意思是高性能的 npm。pnpm 由 npm/yarn 衍生而来&#xff0c;解决了 npm/yarn 内部潜在的 bug&#xff0c;极大的优化了性能&#xff0c;扩展了使用场景。被誉为 “最先进的包管理工具”。 2、pnpm特点 速度…

Eolink Apikit 如何进行 Websocket 接口测试?

什么是 websocket &#xff1f; WebSocket 是 HTML5 下一种新的协议&#xff08;websocket协议本质上是一个基于 tcp 的协议&#xff09;。 它实现了浏览器与服务器全双工通信&#xff0c;能更好的节省服务器资源和带宽并达到实时通讯的目的 Websocket 是一个持久化的协议。…

限流常用算法以及基于Sentinel的微服务限流及熔断

一、服务限流的作用及实现 在没有任何保护机制的情况下&#xff0c;如果所有的流量都进入服务器&#xff0c;很可能造成服务器宕机导致整个系统不可用&#xff0c;从而造成巨大的损失。为了保证系统在这些场景中仍然能够稳定运行&#xff0c;就需要采取一定的系统保护策略&…

docker compose部署wordpress

准备机器&#xff1a; 192.168.58.151 &#xff08;关闭防火墙和selinux&#xff09; 安装好docker服务 &#xff08;详细参照&#xff1a;http://t.csdnimg.cn/usG0s 中的国内源安装docker&#xff09; 部署wordpress: 创建目录&#xff1a; [rootdocker ~]# mkdir…

【什么是POI,为什么它会导致内存溢出?】

什么是POI&#xff0c;为什么它会导致内存溢出 什么是POIExcel并没看到的那么小POI的溢出原理 拓展知识几种Workbook格式 什么是POI Apache POl&#xff0c;是一个非常流行的文档处理工具&#xff0c;通常大家会选择用它来处理Excel文件。但是在实际使用的时候经常会遇到内存溢…

VR汽车技术服务虚拟仿真实训平台更好地辅助职业上岗培训

VR汽车虚拟仿真教学软件是一种基于虚拟现实技术的教学辅助工具。它能够模拟真实的汽车环境和操作场景&#xff0c;让学生能够通过虚拟仿真来学习和实践汽车相关知识和技能。 与传统的教学方式相比&#xff0c;VR汽车虚拟仿真教学软件具有更高的视觉沉浸感和互动性&#xff0c;能…

网络时间服务器

本章主要介绍网络时间服务器。 使用chrony配置时间服务器 配置chrony客户端向服务器同步时间 1 时间同步的必要性 一些服务对时间要求非常严格&#xff0c;例如&#xff0c;图所示的由三台服务器搭建的ceph集群。 这三台服务器的时间必须保持一致&#xff0c;如果不一致&#…

https网站连接图标四种状态(安全、没有完全安全、过期和危险)

浏览 Web 时&#xff0c;地址栏中会显示一个图标&#xff0c;指示与要访问的网站的连接的安全性。 此图标可帮助您确定是否可以安全发送和接收网站的信息。 连接会告知发送到站点和从站点发送的信息&#xff08;如密码、地址或信用卡&#xff09;是否安全发送&#xff0c;且无法…

Linux环境下maven的安装

到官网下载maven 步入下面的地址选择合适的maven版本 https://dlcdn.apache.org/maven/ 以笔者为例&#xff0c;选择了3.5.4这个版本 将maven上传到Linux服务器并解压 tar -zxvf apache-maven-3.5.4-bin.tar.gz配置环境变量 我们使用vim编辑profile vim /etc/profile环境…

day03、关系模型之基本概念

关系模型之基本概念 1.关系模型概述1.1 关系模型三要素基本结构&#xff1a;relation/Table基本操作:relation operator 2.什么是关系3.关系模型中的完整性约束 本视频来源于B站&#xff0c;战德臣老师 1.关系模型概述 1.1 关系模型三要素 基本结构&#xff1a;relation/Table…

MATLAB——二维小波的单层分解

%% 学习目标&#xff1a;二维小波的单层分解 %% 二维小波适合图像处理和分析&#xff0c;将图像分解为4个图像 两个维度 低通&#xff0c;高通 clear all; close all; load woman.mat; %% which woman.mat Yind2gray(X,map); %将索引图像转换为灰度图像 [c…

Python机器学习19——常用六种机器学习的异常值监测方法(孤立森林,数据支持描述,自编码器,高斯混合,DBSCAN,LOF)

案例背景 异常值监测是机器学习的一个重要领域&#xff0c;博主以前做预测多&#xff0c;异常值监测涉及得少&#xff0c;但之后的工作可能需要做异常值方面的工作&#xff0c;所以大致总结了一下常用的机器学习来做异常值监测的方法以及代码。 标题的这些机器学习方法基本都…

Github 2023-12-13 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2023-12-13统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量非开发语言项目5Python项目2TypeScript项目1Jupyter Notebook项目1JavaScript项目1PHP项目1 从零开始构建技术…

matlab操作方法(三)——matlab中的数字图像(读取、显示、保存)

数字图像是二维图像用有限数字数值像素的表示。通常像素在计算机中保存为二维整数数组的光栅图像&#xff0c;这些值经常用压缩格式进行传输和存储。 二值图像&#xff1a;图像中每个像素的亮度值仅可以取自0或1的图像&#xff0c;因此也称为1bit图像 灰度图像&#xff1a;图…

flutter 代码混淆

Flutter 应用混淆&#xff1a; Flutter 应用的混淆非常简单&#xff0c;只需要在构建 release 版应用时结合使用 --obfuscate 和 --split-debug-info 这两个参数即可。 –obfuscate --split-debug-info 用来指定输出调试文件的位置&#xff0c;该命令会生成一个符号映射表。目前…