我正在参加 码上掘金体验活动，详情：show出你的创意代码块

嗨！大家好！我是手可摘棉花，一名前端开发，很开心在这里分享文章，期待着大家的点赞👍与关注➕。

介绍

又见面了，肝文不易，大家多多支持一下哈~今天来介绍css多列布局常见的几种实现方式，以下会用到一些图片，用了掘友的头像，哈哈哈，如果介意我再换，多列布局本文实现有三种方式，第一种是传统的float浮动布局，第二种是flex弹性布局，第三种是grid网格布局，分别有代码给大家分析展示出来，下面听我慢慢到来。

代码块

code.juejin.cn/pen/7088579…

代码介绍

公共样式:

/* 公共 */
body{
  width: 1000px;
  color: #333;
  margin: 50px auto;
}
a{
  color: #333;
  text-decoration: none;
}
h1{
  font-size: 18px;
}

.item{
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}
img{
  object-fit: contain;
  width: 220px;
  height: 220px;
  padding: 5px;
  overflow: hidden;
  margin: auto;
}
.info{
  font-size: 14px;
  padding: 20px;
  line-height: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

1.第一种实现方式---传统的float布局

float布局想必大家并不陌生,刚出来工作的时候做web端页面布局的时候用的最多的一种布局方式,每列固定宽度然后浮动过去,最后一列用not来写右边距排除.

html:

<h1>float浮动布局</h1>
  <div class="list" style="display:;">
    <div class="item">
      <a href="#">
        <img src="https://p3-passport.byteacctimg.com/img/user-avatar/5d08c09da9bffd1331bc6220b884a466~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p6-passport.byteacctimg.com/img/user-avatar/7e4a7c01e7022917f7242419f19a6c03~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p6-passport.byteacctimg.com/img/user-avatar/66a10c07d7d728a7eaca1c2ef7795b56~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p26-passport.byteacctimg.com/img/user-avatar/2a8d6ccfbc571fc588cf3c40657b0986~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>

    <div class="item">
      <a href="#">
        <img src="https://p9-passport.byteacctimg.com/img/user-avatar/80d016f9fb13c2016ea82eca4546d1cb~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p6-passport.byteacctimg.com/img/user-avatar/ed03b70fe4ab1ce93c74ff5cf4ae82d0~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p3-passport.byteacctimg.com/img/user-avatar/3cc923506359b8170e1d8b9051bb2bef~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p26-passport.byteacctimg.com/img/user-avatar/d50f98a57ec956717d448dacde987aa5~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
  </div>

样式:

/* float浮动布局 */
.list .item{
  width: 230px;
  float: left;
  margin-bottom: 24px;
}
.list .item:not(:nth-child(4n)){
  margin-right: 24px;
}
.list .item{
  transition: all 0.5s;
}
.list .item:hover{
  box-shadow: 0 0 10px 5px #eee;
  transform: translate(0,-15px);
}

效果展示:

第二种布局方式---flex布局

flex弹性布局,比较方便的布局方式,常用于手机端h5的布局还有小程序的布局.

html:

<h1>flex布局</h1>
  <div class="list-flex" style="display:;">
    <div class="item">
      <a href="#">
        <img src="https://p3-passport.byteacctimg.com/img/user-avatar/5d08c09da9bffd1331bc6220b884a466~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p6-passport.byteacctimg.com/img/user-avatar/7e4a7c01e7022917f7242419f19a6c03~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p6-passport.byteacctimg.com/img/user-avatar/66a10c07d7d728a7eaca1c2ef7795b56~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p26-passport.byteacctimg.com/img/user-avatar/2a8d6ccfbc571fc588cf3c40657b0986~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>

    <div class="item">
      <a href="#">
        <img src="https://p9-passport.byteacctimg.com/img/user-avatar/80d016f9fb13c2016ea82eca4546d1cb~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p6-passport.byteacctimg.com/img/user-avatar/ed03b70fe4ab1ce93c74ff5cf4ae82d0~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <img src="https://p3-passport.byteacctimg.com/img/user-avatar/3cc923506359b8170e1d8b9051bb2bef~300x300.image">
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
  </div>

/* flex布局 */
.list-flex{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
}
.list-flex .item{
  flex-basis: 230px;
  margin-bottom: 24px;
}
.list-flex .item:not(:nth-child(4n)){
  margin-right: 24px; 
}
.list-flex .item img{
  transition: all 0.5s;
}
.list-flex .item:hover img{
  transform: rotate(360deg);
}

效果展示:

第三种布局方式---grid布局

grid布局也就是网格布局,目前来说虽然用到的地方比较少,但是对于布局不规格的列表布局的时候比较方便,比如每个都不同宽度,高度布局的时候超级方便的.

html:

 <h1>grid布局</h1>
  <div class="list-grid">
    <div class="item">
      <a href="#">
        <div class="img-con">
          <img src="https://p3-passport.byteacctimg.com/img/user-avatar/5d08c09da9bffd1331bc6220b884a466~300x300.image">
        </div>
        <div class="info">
            文字介绍文字介绍文字介绍文字介绍文字介绍
          </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <div class="img-con">
          <img src="https://p6-passport.byteacctimg.com/img/user-avatar/7e4a7c01e7022917f7242419f19a6c03~300x300.image">
        </div>
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <div class="img-con">
          <img src="https://p6-passport.byteacctimg.com/img/user-avatar/66a10c07d7d728a7eaca1c2ef7795b56~300x300.image">
        </div>
        
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <div class="img-con">
          <img src="https://p26-passport.byteacctimg.com/img/user-avatar/2a8d6ccfbc571fc588cf3c40657b0986~300x300.image">
        </div>
        
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>

    <div class="item">
      <a href="#">
        <div class="img-con">
          <img src="https://p9-passport.byteacctimg.com/img/user-avatar/80d016f9fb13c2016ea82eca4546d1cb~300x300.image">
        </div>
        
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <div class="img-con">
          <img src="https://p6-passport.byteacctimg.com/img/user-avatar/ed03b70fe4ab1ce93c74ff5cf4ae82d0~300x300.image">
        </div>
        
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
    <div class="item">
      <a href="#">
        <div class="img-con">
          <img src="https://p3-passport.byteacctimg.com/img/user-avatar/3cc923506359b8170e1d8b9051bb2bef~300x300.image">
        </div>
        
        <div class="info">
          文字介绍文字介绍文字介绍文字介绍文字介绍
        </div>
      </a>
    </div>
  </div>

/* list-grid */
.list-grid{
  display: grid;
  grid-template-columns: repeat(4, 230px);
  gap: 24px;
}

.list-grid .item img{
  transition: all 0.5s;
}

.img-con{
  width: 230px;
  height: 230px;
  overflow: hidden;
}
.list-grid .item:hover img{
  transform: scale(1.5);
  padding: 0;
}

效果展示:

总结

以上就是三种方式的布局,每种布局鼠标移上去都有不同的动态效果,以上就这些内容,感谢大家观看,谢谢~觉得好的话点赞或收藏