首页 >  js/css/html >  view、div水平横向排列

前言

归纳几种div、view(小程序)块状元素横向排列的方式

一、flex布局（推荐）

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

<div id="my-div">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

#my-div{
    display: flex;
    justify-content: flex-start;
}

    justify-content共有 flex-start 、flex-end、 center、 space-around和 space-between 选择

 1、flex-start（默认） 靠左对齐

 2、flex-end： 靠右对齐

 3、center：水平居中，我们需要的

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

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

二、float 浮动

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

浮动虽然也能做到水平排列，但是由于是浮动元素，会失去高度，并且还会打乱顺序，需要重新调整，比较麻烦

 

三、inline-block 行块标签

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

此类方法是将块状元素改成了行类元素，但彼此间会存在间隙，也不能均匀分布，

fy-content: flex-start;