div块横排排列

以这个div块为例，group的高度由内容撑开

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

显示结果

常见的有三种方法可以让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;
}

三、inline-block 行块标签

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