如何在一个div容器中一行显示4个块元素

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

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

 

 

 

代码如下：

 

 

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

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

// 第二种方法

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

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

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