提问:一个view上面放置3个子view,子view的宽度为屏幕宽度30%,高度和宽度一致?
在iOS中,so easy,所以我不说
码农从来话不多,以代码说话
<view class='diffenceContent superBgColor'> <view class='subContent subBgColor'>1</view> <view class='subContent subBgColor'>2</view> <view class='subContent subBgColor'>3</view> <view class='subContent subBgColor'>4</view> </view>
.diffenceContent { display: flex; /* flex-direction: column; */ flex-wrap: wrap; width: 100%; top: 20px; height: 200px; justify-content: space-between; /* align-items: stretch; */ }
上面设置了子view的布局方式flex,并且可以换行,在主轴线上的对齐方式
重点来了,子view的大小怎么确定,约束(原谅我用了ios的概念)该怎么写?
width: 30%; height: width;
no?height并没有起作用
width: 30%; padding-bottom: 30%; height: 0;
设置其底部或者顶部内布局和宽度一致即可,同样是30%,并将默认高度清除
这里可能会有疑问:这个30%是怎么来的?请看下面
podding属性值
扫描二维码关注公众号,回复:
955760 查看本文章
length | 规定以具体单位计的固定的上内边距值,比如像素、厘米等。默认值是 0px。 |
% | 定义基于父元素宽度的百分比上内边距 |
inherit | 规定应该从父元素继承上内边距。 |
这里新发现的问题是这么设定,它的子视图显示会有问题(子视图会在其外面显示,可能是因为height:0的缘故吧)