自适应等宽高盒子 

<!DOCTYPE html>
<html>
    <head>
        
        <title>XXX网</title>
        
        <style type="text/css">
                div.category{
                    width:32%;
                    padding:32% 0 0 0;
                    float: left;
                    margin-left: 1%;
                    margin-top: 1%;
                    background-color: antiquewhite;
                    position: relative;
                }
                .category_title{
                    position: absolute;
                    top: 16%;
                    font-size: 1.2rem;
                    width: 100%;
                    text-align: center;
                }
        </style>
    </head>
    <body>
        <div class="category">
            <h3 class="category_title">XXX</h3>
        </div>
        <div class="category">
            <h3 class="category_title">XXX</h3>
        </div>
        <div class="category">
            <h3 class="category_title">XXX</h3>
        </div>
        <div class="category">
            <h3 class="category_title">XXX</h3>
        </div>
    </body>
</html>
posted @ 2021-12-08 09:27  静默韶华  阅读(16)  评论(0)  编辑  收藏  举报