多个div横向排列的几种方法_syq8023_多个div横向排列

大大的周 02-07 4570

以下面这组 div 为例，group的高度由内容撑开

显示结果如下为上下排列

?常见的有三种方法可以让div横向排列，分别是flex 弹性盒模型、float 浮动?和?通过inline-block 行块标签等。

一、flex 弹性盒模型

flex 弹性盒模型是最简便的方法，也是本人最喜欢用的方法，给父元素设置 display: flex; 即可

#group{ display: flex; }

效果图：

? ? ? ? ? ? ? ? ? ? ? ? ? ?

?还可以通过?justify-content?属性调整子元素的水平对齐方式：

#group{ display: flex; justify-content: flex-start; } flex-start：默认靠右对齐

? ? ? ? ? ?

?flex-end：靠左对齐

? ? ? ? ? ?

?center：水平居中

? ? ? ? ?

?space-around：平均分布（左右有间隔）

? ? ? ? ??

space-between：平均分布（左右无间隔）

? ? ? ? ?

??当父元素宽度不够时， flex 默认是不会换行的，而是会等比例压缩，缩放比例?flex-shrink?属性或复合属性?flex?相关。

? ? ? ? ? ?

??二、float 浮动

?除了用flex 弹性盒模型设置div横向排列，利用float 浮动属性也可设置div横向排列

代码如下：

#div1{ float: left; } #div2 { float: right; } #div3 { float: right; }

显示结果：

? ? ? ? ? ?

?float 的特点：

多个 div 右浮动时，顺序会颠倒，请注意看 div2 和 div3，可以通过将它们再用一个 div 包起来，然后对它们设置左浮动，对父 div 设置右浮动来解决。脱离文档流，若父元素高度由内容撑开，那么就撑不开，从图中可以看到 wrap 没了，因为高度变为了 0，可通过清浮动来解决。文字会环绕在浮动元素周围，图中未表现出来。不能换行，图中未表现出来。三、inline-block 行块标签

代码如下：

#div1, #div2, #div3{ display: inline-block; }

显示结果：

? ? ? ? ? ?

?inline-block 特点：?

?元素间会有空白。这个空白其实是空白符，因为 inline-block 会使元素在行内排列，也就是跟文字在一起排列，而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符，所以就会出现缝隙。

解决方案有：

1. 通过给父元素设置?font-size: 0;?，使空白符不可见。但会导致子元素中继承的字体大小也为 0，解决方案：

? ? ? ? ? ? ? ?a.? 可以明确子元素内字体大小的，为其单独设置文字大小。

? ? ? ? ? ? ? ? b.? 可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属性。

2. 在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差，丑拒。