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

时间：2021-04-19 14:42:35 阅读：12 评论：0 收藏：0 [点我收藏+]

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

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

技术分享图片

代码如下：

技术分享图片

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

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

// 第二种方法

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

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

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

原文：https://www.cnblogs.com/liangwenxuan/p/14676144.html

踩

(0)

评论一句话评论（0）

分享档案

更多>