不好意思，因为是同事问的一个问题，我就放截图了，比较方便，看着也更直观，也正好看一下是否是你们想要的样式

第一张是正在写的样式和效果图，第二张是元素实现代码

 

 

 

代码如下：

 

 

 利用宽度百分比就能解决了

// 第一种方法
.content{
  .item{
    width: 25%;
    display:inline-block;
  }
}

// 第二种方法
.content{
  .item{
    width: 25%;
    float: left;
  }
}
// inline-block布局 vs 浮动布局

   不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

   一般来说，对于水平排列来说，使用inline-block来布局更好，不用清除浮动，怕会出现布局错乱；如果有文字环绕的情况下可以使用浮动布局

　　

 

版权声明：本文为liangwenxuan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/liangwenxuan/p/14676144.html