多个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;
flex布局对齐方式
}
#div2 {
float: right;
}
#div3 {
float: right;
}
显⽰结果：
float 的特点：
三、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 的开始标签贴在⼀起。可读性极差，丑拒。
<div id="wrap">
<div id="div1">div1
</div><div id="div2">div2
</div><div id="div3">div3</div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。