wxss 다열 디스플레이 구현

1225 단어
오늘은 주로 세 가지 방식으로 이루어진다. wxml 코드:

  
    
    {{item.title}}
  


1. 부동float를 통해 실현
.container{
  margin: 0;
  padding: 0;
  display: block;
}
.viewContainer{
    float: left;
    width: 33.3%;
    height: 150px;
    text-align: center;
    border: 1px solid lightblue;
    box-sizing: border-box;

}
.cellIcon{
  width: 100%;
  height: 120px;
}

2. flex-direction 구현:
.container{
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
}
.viewContainer{
  width: 33.3%;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid lightblue;
  
}
.cellIcon{
  width: 100%;
  height: 110px;
}

3. column-count를 통해 실현
.container{
  margin: 0;
  padding: 0;
  display: block;
  column-count: 2;
  column-gap: 0px;
  }
.viewContainer{
    height: 150px;
    text-align: center;
    border: 1px solid lightblue;
    box-sizing: border-box;
    background: red;
}
.cellIcon{
  width: 100%;
  height: 120px;
}

최종 효과:

좋은 웹페이지 즐겨찾기