html5：div横向排列的⽅法。
div 横向排列的⽅法。
以下⾯这组 div 为例，wrap 的⾼度由内容撑开
<div id="wrap">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
平时是这样的，上下排列~
float 浮动
#div1{
float: left;
}
#div2 {
float: right;
}
#div3 {
float: right;
}
html中的5种空格表示然后这样了
成功横向排列了，但是有⼏个问题~
float 的特点：
多个 div 右浮动时，顺序会颠倒，请注意看 div2 和 div3，可以通过将它们再⽤⼀个 div 包起来，然后对它们设置左浮动，对⽗ div 设置右浮动来解决。
脱离⽂档流，若⽗元素⾼度由内容撑开，那么就撑不开，从图中可以看到 wrap 没了，因为⾼度变为了 0，可通过清浮动来解决。
⽂字会环绕在浮动元素周围，图中未表现出来。
不能换⾏，图中未表现出来。
inline-block
⾏块标签
横排成功~但同样有些问题：inline-block 特点：
元素间会有空⽩。这个空⽩其实是空⽩符，因为 inline-block 会使元素在⾏内排列，也就是跟⽂字在⼀起排列，⽽我们源代码中 div 和div 之间的空格、Tab、换⾏符在浏览器⾥会被合并成⼀个空⽩符，所以就会出现缝隙，常见的解决⽅案有：
1. 通过给⽗元素设置 font-size: 0; ，使空⽩符不可见。但会导致⼦元素中继承的字体⼤⼩也为 0，解决⽅案：
1. 可以明确⼦元素内字体⼤⼩的，为其单独设置⽂字⼤⼩。
2. 可以使⽤ rem 作为字体⼤⼩单位来继承 HTML 根元素的字体⼤⼩属性。
2. 在源代码⾥把前⼀个 div 的结束标签和后⼀个 div 的开始标签贴在⼀起。可读性极差，丑拒。
3. 不⽤ inline-block，嘿嘿~
可以换⾏，如下图
flex 弹性盒模型
最爱的解决⽅案，给⽗元素设置 display: flex; 即可。效果图：#div1, #div2, #div3{
display: inline-block;}
<div id="wrap">
<div id="div1">div1
</div><div id="div2">div2
</div><div id="div3">div3</div></div>
#wrap {
display: flex;
}
还可以通过 justify-content  属性调整⼦元素的⽔平对齐⽅式：
flex-start：
默认，图同上。
flex-end：
center：
space-around：
space-between：
不过当⽗元素宽度不够时， flex 默认是不会换⾏的，⽽是会等⽐例压缩，缩放⽐例 flex-shrink  属性或复合属性 flex
相关。通过 flex-wrap  属性可以使其换⾏，该值有三个取值 nowrap 、 wrap 、 wrap-reverse ，默认为 nowrap 。
#wrap {
display: flex;
justify-content: flex-start;
}
#wrap{
display: flex;
flex-wrap: nowrap;
}
nowrap
默认，图略。
wrap
wrap-reverse
flex 使⽤不再深⼊探讨，推荐阮⼀峰写的教程

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