如何在一個div容器中一行顯示4個塊元素

不好意思，因為是同事問的一個問題，我就放截圖了，比較方便，看着也更直觀，也正好看一下是否是你們想要的樣式

第一張是正在寫的樣式和效果圖，第二張是元素實現代碼

 

 

 

代碼如下：

 

 

 利用寬度百分比就能解決了

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

// 第二種方法

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

   不同之處：對元素設置display：inline-block ，元素不會脫離文本流，而float就會使得元素脫離文本流，且還有父元素高度坍塌的效果

   一般來說，對於水平排列來說，使用inline-block來布局更好，不用清除浮動，怕會出現布局錯亂；如果有文字環繞的情況下可以使用浮動布局