双飞翼布局（float和flex实现）

最新推荐文章于 2023-09-22 20:10:22 发布

young63

最新推荐文章于 2023-09-22 20:10:22 发布

阅读量246

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/young63/article/details/121829384

版权

双飞翼布局

要求

中间宽度自适应,两边宽度固定
中间栏在浏览器中优先展现渲染
float布局实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .parent {
        /*以下非必须 */
        overflow: hidden;color: #fff;margin-bottom: 10px;
    }
    .div-content {
        width: calc(100% - 400px); float: left;margin: 0 200px;
        /*以下非必须 */
        background-color: #999;
    }
    .div-left {
        width: 200px;margin-left: -100%;float: left;
        /*以下非必须 */
        background-color: orange;
    }

    .div-right {
        width: 200px;margin-left: -200px;float: left;
        /*以下非必须 */
        background-color: #999;
    }
</style>

<body>
    <div class="parent">
        <div class="div-content">
            <ul>
                <li>中间宽度自适应,两边宽度固定</li>
                <li>中间栏在浏览器中优先展现渲染</li>
                <li>这里的每一列都可以是最高列</li>
            </ul>
        </div>
        <div class="div-left">
           我是左边
        </div>
        <div class="div-right">我是右边</div>
    </div>
</body>

</html>

flex布局实现（flex-shrink和order）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .flex {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .flex-content {
        background-color: #999;
        width: 100%;
        order: 1;
    }

    .flex-left {
        background-color: orange;
        width: 200px;
        order: 0;
        flex-shrink: 0;
    }

    .flex-right {
        background-color: skyblue;
        width: 200px;
        flex-shrink: 0;
        order: 2;
    }
</style>

<body>
    <div class="parent flex">
        <div class="flex-content">
            <ul>
                <li>中间宽度自适应,两边宽度固定</li>
                <li>中间栏在浏览器中优先展现渲染</li>
                <li>每一列都可以是最高列</li>
            </ul>
        </div>
        <div class="flex-left">
            我是左边
        </div>
        <div class="flex-right">我是右边</div>
    </div>
</body>

</html>