CSS横向排序_让多个div盒子并排同行显示

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

xuriliangjava

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

阅读量6.2k

点赞数 3

分类专栏： css 文章标签： css 布局

本文链接：https://blog.csdn.net/xuriliangjava/article/details/78143415

版权

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

动态div横向排列充满一行，每列大小自适应，最终效果如下：
这里写图片描述
一行的div个数是不确定的。

方法1：使用table布局

<div>
    <table width="100%">
        <tr>
            <td class="tbl">块1</td>
            <td class="tbl">块2</td>
            <td class="tbl">块3</td>
        </tr>
    </table>
</div>

 .tbl{border:1px solid lightgray;}

方法2：使用display:table-cell布局

 <div class="container">
    <span class="item">块1</span>
    <span class="item">块2</span>
    <span class="item">块3</span>
    <span class="item">块4</span>
</div>

.container{display: table;width:100%;}
.item{
    height: 100px;
    border: 1px solid lightgray;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

方法3：使用flex布局

 <div class="container">
    <span class="item">塊狀1</span>
    <span class="item">塊狀1</span>
    <span class="item">塊狀1</span>
    <span class="item">塊狀1</span>
    <span class="item">塊狀1</span>
    <span class="item">塊狀1</span>
    <span class="item">塊狀1</span>
</div>

.container{display: flex;}
.item{  height: 100px; border-right: 1px solid lightgray;flex-grow:1;}