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

最新推荐文章于 2024-08-07 11:21:21 发布

゛。

最新推荐文章于 2024-08-07 11:21:21 发布

阅读量1w

点赞数 9

文章标签： html linq 前端

本文链接：https://blog.csdn.net/qq_52104411/article/details/123360892

版权

本文介绍了如何使用flexbox和float属性实现div元素的自适应布局，包括设置display:flex让子元素按行排列，并通过width和float调整宽度，展示黑、粉、红三种颜色背景的div实例。

摘要由CSDN通过智能技术生成

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;
}