使用css生成田字格的四种方法

• • html结构
  • css基础样式
  • 第一种 flex布局
  • 第二种 绝对定位
  • 第三种 css瀑布流
  • 第四种 float浮动

html结构

<div class="box">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
 </div>

css基础样式

box{
   width: 200px;
   height: 200px;
}
.box div{
   width: 100px;
   height: 100px;
   background-color: rgb(19, 130, 150);
}

第一种 flex布局

.box{
   display: flex;
   flex-wrap: wrap;
}

第二种 绝对定位

.box{
   position: relative;
 }
 .box div{
   position: absolute;
 }
 .box div:nth-child(2){
  	left: 100px;
 }
 .box div:nth-child(3){
   top: 100px;
 }
 .box div:nth-child(4){
   top: 100px;
   left: 100px;
 } 

第三种 css瀑布流

注意：css瀑布流与其他方式中，div排列方式的不同（试试吧）

.box{
   columns: 2;
   column-gap: 0;
} 

第四种 float浮动

.box div {
  float: left;
 }