calc实现九宫格布局

最新推荐文章于 2022-03-07 16:54:32 发布

gyuei

最新推荐文章于 2022-03-07 16:54:32 发布

阅读量149

点赞数

分类专栏： HTML5+CSS3

本文链接：https://blog.youkuaiyun.com/gyueh/article/details/115405996

版权

要求:用calc属性实现九宫格布局

风格一

wxml部分代码如下:

<view class="content">
	<view class="squared-box">111</view>
	<view class="squared-box">222</view>
	<view class="squared-box">333</view>
	<view class="squared-box">444</view>
	<view class="squared-box">555</view>
	<view class="squared-box">666</view>
	<view class="squared-box">777</view>
	<view class="squared-box">888</view>
</view>

wxss部分代码如下：


.squared-box {
  display: inline-block;
  width: calc(100% / 3);
  height: 200rpx;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
}

.squared-box:nth-of-type(3n) {
  /* 选择个数是3的倍数的元素 */
  border-right: 1px solid #e5e5e5;
}