父容器宽度自适应

最新推荐文章于 2022-07-17 18:22:09 发布

原创最新推荐文章于 2022-07-17 18:22:09 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #html5 #前端

前端知识专栏收录该内容

7 篇文章

订阅专栏

本文介绍两种实现子元素垂直排列并折行，同时父容器宽度自适应的方法：使用display:inline-flex和display:grid。通过具体代码示例，展示了如何设置CSS属性以达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多项子元素垂直排列且折行，父容器宽度如何自适应。

方法一：display:inline-flex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 重置默认边距 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            height: 500px;/* 定义父容器高度 */
            display: inline-flex;/* 定义为inline-flex */
            flex-wrap: wrap;/* 设置换行，默认是不换行的 */
            writing-mode: vertical-lr;/* 盒子从左开始垂直排列 */
            background: lightcoral;
        }
        
        .container div {
            width: 200px;/* 设置子元素宽度 */
            height: calc(100% / 5);/* 定义子元素高度 */
            writing-mode: horizontal-tb;/* 定义子元素水平排列，默认垂直排列 */
            background: lightblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
    </div>
</body>

</html>

方法二：display:grid

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 重置默认边距 */
        
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            height: 500px;
            display: grid;/* 定义为grid布局 */
            grid-template-rows: repeat(5, 1fr);/* 不管高度多少都分为5行 */
            grid-auto-flow: column;/* 定义网格中被自动布局的元素怎样排列 */
            background: lightcoral;
            position:absolute;/* 宽度自适应子元素，也可以float: left; */
        }
        .container div {
            background: lightblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
        <div>斯为泰山而不骄</div>
    </div>
</body>

</html>