父容器宽度自适应

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

crane XXXX

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

阅读量1k

点赞数

分类专栏：前端知识文章标签： css html css3 html5 前端

本文链接：https://blog.csdn.net/fmqxtocy/article/details/104673152

版权

前端知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

方法一：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>

此处子元素可设置宽高，若不设置，盒子宽高自适应内容。

crane XXXX

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
父容器宽度自适应

多项子元素垂直排列且折行，父容器宽度如何自适应。方法一：display:inline-flex<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...
复制链接

扫一扫