多列等高布局

最新推荐文章于 2025-06-11 14:55:28 发布

qq_22317389

最新推荐文章于 2025-06-11 14:55:28 发布

阅读量300

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/qq_22317389/article/details/80041862

HTML5 专栏收录该内容

29 篇文章

订阅专栏

主要利用padding-bottom将列高撑开，在将margin-bottom设为负值，其原高度不变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        body{
            margin: 50px;
                
        }
        #container{
            width: 100%;
            overflow: hidden;
            /* 
                隐藏高度不同的列的方法：
                padding-bottom: 500px;
                margin-bottom: -500px;
                以上两句使得画面的实际高度不变，但是背景告诉依然为800px；
                overflow: hidden;
                之后利用overflow将背景之外的高度隐藏
            */
        }

        .col{
            color: white;
            padding: 20px;
            background-color: rgb(46, 174, 248);
            font-family: 'Times New Roman', Times, serif;
            width: 33.33%;
            float: left;
            box-sizing: border-box;
            text-align: center;
            padding-bottom: 500px;
            margin-bottom: -500px;
        }
        
       .col img{
            padding-top: 20px;
            padding-bottom: 10px;
            width: 30%;

        }

        .col h1{
           
            font-size: 100px;
        }

        .col p{
            font-size: 60px;
        }

        .col:nth-child(2){
            background-color: rgb(128, 184, 233);
        }

        .col:nth-child(3){
            background-color: rgb(146, 200, 247);
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="col">
          <img src="trend.png">
          <h1>Trend</h1>
          <p>The tool refers to periodic trends for collecting and analyzing weak signals and trends in chemistry.</p>
        </div>
        <div class="col">
          <img src="user.png">
          <h1>User</h1>
          <p>User namespaces are now fully implemented as of document is obsolete.</p>
        </div>
        <div class="col">
          <img src="picture.png">
          <h1>Picture</h1>
          <p>Taking good pictures is something anyone can do with any camera, if you practice enough and avoid some common mistakes..</p>
        </div>
      </div>
</body>
</html>