微信小程序WXSS的学习（二）——Float布局

最新推荐文章于 2024-03-13 09:59:37 发布
最新推荐文章于 2024-03-13 09:59:37 发布
阅读量3.4k 收藏 14
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45986865/article/details/107076184
版权
本文是作者关于微信小程序WXSS中Float布局的个人学习总结，重点探讨了如何利用float解决“绕图排文”问题，以及设置浮动区域位置、外边距的方法。同时提醒，在使用float后，需要正确清理浮动以防止影响后续内容布局。文章通过实例演示和代码展示来加深理解。
摘要由CSDN通过智能技术生成

个人学习总结，防遗忘

float可以解决一些“绕图排文”的问题

float:设置浮动区域的位置（left/right/none）
margin:设置外边距，最多设置四个值：上右下左/上【左右】下/【上下】【左右】
clear;： 为了在float之后为了不影响下面内容的布局，一定要记得清浮动

float局部详解

演示：

在这里插入图片描述

代码

wxml：

<view class="box">
	<view class="title">float布局</view>
	<view class="bg1">
		<view class="box1">box1</view>
		<view class="box2">box2</view>
		<view class="box3">box3</view>
最低0.47元/天 解锁文章
任性的文艺青年
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
微信小程序-右侧浮动导航
12-14
微信小程序-右侧浮动导航，微信小程序-右侧浮动导航，微信小程序-右侧浮动导航，微信小程序-右侧浮动导航，
float-action-button:小程序版 float action button
05-18
float-action-button 小程序版 float action button 实现效果：首页设置一个浮动按钮，点击后出现3个隐藏按钮，点击跳转demo。
(imooc)微信小程序overflow、float、line-height等WXSS样式属性
该用户还没想到好的昵称的博客
07-13 3646
overflow：规定当内容溢出元素框时发生的事情      float：定义元素在哪个方向浮动。 以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素（替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。如：image、text、button等，...
微信小程序的浮动与定位，flex布局
m0_74842053的博客
03-13 2584
示例代码: 运行结果图： 代码如下： 结果如图： 结果图： （2）进行绝对定位代码如下： 结果图： （3）进行相对定位： 代码： 结果如图： （4）进行固定定位代码如下： 结果如图： （1）容器属性 flex容器支持的属性有7种，如图：
微信小程序：瀑布流使用float的问题
qq_45083002的博客
07-28 622
微信小程序
小程序制作（超详解！！！）第八节 Float页面布局
2201_76115387的博客
10-23 271
Float页面布局
微信小程序wxml和wxss样式
热门推荐
zxhandroid的博客
04-18 2万+
对于css不熟悉的android程序员来说，开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了，它们两者相当于android的布局文件，其中wxml指定了界面的框架结构，而wxss指定了界面的框架及元素的显示样式。 一、wxml 界面结构wxmL比较容易理解，主要是由八大类基础组件构成：
微信小程序项目实例——今日美食
05-24
总的来说，“微信小程序项目实例——今日美食”是一个集前端技术、后端数据管理、用户体验设计于一体的综合项目，对于学习微信小程序开发和移动应用设计的人员来说，是一个很好的实践案例。通过分析和实施这个项目，...
微信小程序项目实例——体质计算器
05-27
开发者使用微信提供的开发工具，结合微信小程序的框架和组件，编写WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）来构建页面结构和样式，同时用JavaScript处理业务逻辑和数据管理。 对于iOS app开发者，...
微信小程序项目实例——备忘录
05-24
总结，这个“微信小程序项目实例——备忘录”涵盖了微信小程序的基础开发、前端设计、数据管理、用户交互等多个方面的知识点，为学习微信小程序开发提供了实用的示例。通过实践这样的项目，开发者可以深入理解微信小...
微信小程序项目实例——幸运大转盘
05-24
微信小程序的开发主要基于微信提供的开发工具，采用WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）进行界面布局，同时结合JavaScript来处理业务逻辑和数据管理。在这个“幸运大转盘”项目中，开发者需要...
微信小程序之左右布局的实现代码
01-03
本文以一个简单的小例子，简述在微信小程序开发中左右布局功能的实现方式，主要涉及scroll-view ，列表数据绑定，及简单样式等内容，仅供学习分享使用。 概述 在微信小程序开发中，左右分栏（左边显示分类，右边显示明细，然后进行联动）是一种常见的布局方式，多应用于点餐，冷饮店，外卖，以及其他类似的商城。 布局分析 布局分析图示如下： 涉及知识点 scroll-view 可滚动视图区域。使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 scroll-y 是否允许纵向
Float类的小程序
xiepeifeng的专栏
04-25 635
<br />        以下程序是输出结果：<br />        Float fl = new Float("123");<br />         Float f2 = new Float("123.0");<br />         if(fl.equals(f2)){<br />             System.out.println("00000000000");<br />         }<br /><br />         if(fl.equals("123
doble float小程序
09-03 600
#include typedef unsigned long    u32;typedef struct x_double_type_t     x_double_type;struct x_double_type_t {    u32 low_32;    u32 hi_32 ;};#define double     x_double_typevoid f2d( float f , double*x ){    u32 a , b;    u32 uf =*(u32*)&f;    u32*ux = (
小程序WXSS布局
dengshumi7891的博客
10-21 172
1. 尽量采用flex 布局，指定flex-direction是row( 从左到右）还是column （从上到下） 特别要记得写flex-wrap: wrap; 不然超出屏幕部分不会换行 display: flex; flex-direction: row; flex-wrap: wrap; width:690rpx; 2. 美工设计是按Iphone...
小程序开发学习（3）---.wxss详解篇
weixin_48678602的博客
07-29 1万+
文章目录1. app.wxss2.跳转按钮设置2.1 hover-class2.2 goStudy2.2.1 设置边框长宽2.2.2 字体居中设置2.2.3 边框离上、左、下距离设置2.2.4 字体大小、加粗设置2.2.5 边框厚度、颜色设置2.2.6 矩形边角设置 本文主要介绍一些.wxss里的一些属性和功能 1. app.wxss app.wxss主要是用在全局配置样式，有些可以共有的样式，就不需要在每个.wxss文件夹中重复使用，优先级比.wxss低一些，所以如果两者都写入了样式，会默认执行文件
微信小程序wxss布局属性-全
qq_41984634的博客
05-01 1万+
123
制造业运营生产一体化整体规划方案.pdf
最新发布
08-11
制造业运营生产一体化整体规划方案.pdf
微信小程序案例：综合Flex与Float布局
通过这个作业，学生将不仅巩固对 Flex 和 Float 布局的理解，还会提高他们的小程序开发技能，如WXML和WXSS的运用，以及如何实现页面间的导航。此外，文档强调了文档格式和提交规范，确保了作业的专业性和整洁度。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

任性的文艺青年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值