弹性布局

最新推荐文章于 2025-06-02 18:44:58 发布

转载最新推荐文章于 2025-06-02 18:44:58 发布 · 89 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/reround/p/10724274.html

HTML部分:

        <div class="box">
            <div class="box-header">欢迎来到</div>
            <div class="box-content">
                <div>啦啦啦啦</div>
                <ul class="downla">
                    <li>红</li>
                    <li>绿</li>
                    <li>黄</li>
                </ul>
                <div>哈哈哈哈</div>
            </div>
            <div class="box-footer">
                <ul>
                    <li>壹</li>
                    <li>贰</li>
                    <li>叁</li>
                    <li>肆</li>
                </ul>
            </div>
        </div>

CSS部分:

        *{
            margin: 0;
            padding: 0;
        }
        html,body,.box{
            height: 100%;
            min-width: 500px;
        }
        .box-header{
            height: 150px;
            line-height: 150px;
            background: #f60;
            text-align: center;
            font-size: 2rem;
            color: #fff;
        }
        .box{
            display: flex;
            flex-direction: column;
        }
        .box-content{
            flex: 1;
            font-size: 2rem;
            border: 1px solid greenyellow;
        }
        .downla{
            font-size: 3rem;
        }
        .box-footer{
            height: 150px;
            line-height: 150px;
            background: #f60;
            text-align: center;
            font-size: 2rem;
            color: #fff;
        }
        .box-footer ul{
            width: 100%;
            
        }
        .box-footer ul li{
            list-style: none;
            display: inline-block;
            width: 25%;
            float: left;
        }