如何让多个div横向排列（html+css）

div是块级元素，是自上而下、垂直排列会占满一行且具有自动换行功能。方法一：使用flex自适应<div class="all"><div class="a"></div><div class="b"></div><div class="c"></div></div>.all{display: flex;

゛。

10190人浏览 · 2022-03-08 19:46:03

゛。 · 2022-03-08 19:46:03 发布

div是块级元素，是自上而下、垂直排列会占满一行且具有自动换行功能。

方法一：使用flex自适应

 <div class="all">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>

.all{
    display: flex; /*给父元素设置flex*/
}
.a,.b,.c{
    width: 300px;
    height: 100px; 
}
.a{
    background-color: black;
}
.b{
    background-color: background-color:pink;
}
.c{
    background-color: red;
}

方法二：使用float浮动方式

    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>

.a,.b,.c{
    width: 300px;
    height: 100px; 
    float: left;/*使三个div向左浮动*/
}
.a{
    background-color: black;
}
.b{
    background-color:pink;
}
.c{
    background-color: red;
}