关于css:css宽高比固定自适应浮动absolutepaddingtop

38次阅读

共计 1055 个字符，预计需要花费 3 分钟才能阅读完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 高度自适应 </title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            background-color: pink;
            position: relative;
        }
        .main:after{display:block;content: "";visibility: hidden;clear: both;}
        .main div{
            float: left;
            width: calc((100vw - 24px)/3);
            position: relative;
            padding-top: 35%;
            margin-right: 8px;
            border:1px black solid;
            border-radius: 10px;
            box-sizing: border-box;
        }
        .main div:nth-child(1){background: url(images/1.jpg) no-repeat;
            background-size: cover;
        }
        .main div:nth-child(2){background: url(images/2.jpg) no-repeat;
            background-size: cover;
        }
        .main div:nth-child(3){background: url(images/3.jpg) no-repeat;
            background-size: cover;
        }
        .p1{
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: red;
            overflow: hidden;

        }
    </style>
</head>
<body>
    <div class="main">
        <div><p class="p1"> 图中三个 DIV 的宽高都会随着页面的大小放弃原有比例放大或放大。其核心思想就是利用 padding 来拓宽盒子高度。通过 padding-top 来设置百分比，使其百分比与宽度的百分比为须要的比例。这里须要留神的是：padding-top 中设置的百分比与 width 中设置的百分比都是以父元素的 width 为参考的 </p></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

正文完