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

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

<div id="group"><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div>
</div>

显示结果如下为上下排列

一、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 的特点：

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