微信小程序没有现成的table标签,该怎么布局呢?

<view class="my-grids">
<block wx:for="{{grids}}" wx:key="*this">
<view url="" class="my-grid" hover-class="my-grid_active">
<view class="my-grid__label">{{item}}</view>
</view>
</block>
</view>
.my-grids {border-top: 1rpx solid #d9d9d9;border-left: 1rpx solid #d9d9d9;overflow: hidden}
.my-grid {position: relative; display:inline-block; padding: 20px 10px;width: 25%;box-sizing: border-box;border-right: 1rpx solid #d9d9d9;border-bottom: 1rpx solid #d9d9d9}
.my-grid_active {background-color: #ececec}
.my-grid__icon {display: block;width: 28px;height: 28px;margin: 0 auto}
.my-grid__label {margin-top:5px;display: block;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden}
Page({
data: {
grids: [0, 1, 2, 3, 4, 5, 6, 7, 8,9,10,11,12,13,14,15]
}
});

微信小程序-表格形式如何布局?的更多相关文章

  1. 微信小程序:原生热布局终将改变世界

    关于本文的所有观点都是网上收集,与作者本人没有任何关系! 最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小 ...

  2. 微信小程序 View:flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  3. 微信小程序_(组件)flex布局

    小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...

  4. 微信小程序 - 非入侵式布局

    非入侵式布局,就是不影响原有内容以及代码,增加用户体验感(UE)的一种方式. 例如我们每个接口必须返回: 0:请求成功 -1:请求失败 .... 这样就便于前端判断数据是否加载成功,然后以客观的方式提 ...

  5. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

  6. 在微信小程序中学习flex布局

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就 ...

  7. 学习微信小程序之css16常见布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  9. 微信小程序之Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

随机推荐

  1. 页面元素的CSS渲染优先级

    样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下:(外部样式)External style ...

  2. node.js 与java 的主要的区别是什么

    node.js 与java都是服务器语言,但是两者存在很大区别:(1)Node.js比Java更快 :node.js开发快,运行的效率也算比较高,但是如果项目大了就容易乱,而且javascript不是 ...

  3. javascript实用例子

    js学习笔记,别错过!很有用的. /////////////////////////////////////////////////////////////////////////////////// ...

  4. Block中的循环引用警告

  5. Codeforces Round #307 (Div. 2) D 矩阵快速幂+快速幂

    D. GukiZ and Binary Operations time limit per test 1 second memory limit per test 256 megabytes inpu ...

  6. ACM1198Farm Irrigation

    这个题目好吓人呀!嘿嘿--- 不过仔细分析下就可以啦! #include<iostream> #include<cstring> using namespace std; ; ...

  7. tomcat 访问400 的一种情况

    tomcat 高版本对访问url做了较高的校验,如果url中包含特殊字符,tomcat会自动拦截,返回400错误.如果要包含特殊字符,需要事先进行转译. 我原来用的apache-tomcat-6.0. ...

  8. [LeetCode] 14. Longest Common Prefix ☆

    Write a function to find the longest common prefix string amongst an array of strings. 解法: 广度优先搜索:先比 ...

  9. Chrome控制台报错个人总结(不定时更新)

    最近开始使用Chrome控制台检测代码错误,对于经常碰到的报错做一个汇总,免得每次遇到都要重新想一遍策略,错误原因,重复劳动,浪费时间. 由于不是每个错误都能碰到,以下仅列出个人写代码时经常碰到的报错 ...

  10. Maven -- 将引用的本地jar文件打进war包里

    我们在做maven项目开发中有时候引用了本地第三方包,例如: <dependency> <groupId>org.artofsolving.jodconverter</g ...