calc实现九宫格布局

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

风格一

1. 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>

2. 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;
}

最终效果如图：

风格二

1. 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 class="squared-box">999</view>
</view>

2. 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: none;
}

最终效果如图: