[html] 第467天写一个左中右的满屏布局，左右固定220px,中间自适应并且要优先加载 #2692

Open

Open

[html] 第467天写一个左中右的满屏布局，左右固定220px,中间自适应并且要优先加载#2692

Labels

第467天写一个左中右的满屏布局，左右固定220px,中间自适应并且要优先加载

我也要出题

added

on Jul 25, 2020

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test transform</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .main {
            position: relative;
        }
        .center {
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            padding: 0 220px;
            overflow: hidden;
        }
        .inner {
            height: 100px;
            background-color: silver;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        .fl,
        .fr {
            width: 220px;
            height: 100px;
        }
        .left {
            background-color: red;
        }
        .right {
            background-color: black;
        }
        .clearfix::after {
            display: block;
            content: '';
            clear: both;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="main clearfix">
        <div class="center">
            <div class="inner">测试测试测试测试测试测试测试测试测试测试测试</div>
        </div>
        <div class="left fl"></div>
        <div class="right fr"></div>
    </div>
</body>
</html>

使用flex布局，并且使用order将left元素放在最左边

<main>
	<div class="center">center</div>
	<div class="left">left</div>
	<div class="right">right</div>
</main>

main {
	width: 100%;
	display: flex;
}


.left, .right {
	flex: 0 0 220px;
}

.center {
	flex: 1;
}

.left {
	order: -1;
}

用 grid 布局，通过grid-area属性指定元素放在哪个位置

    <main class="main">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </main>

    .main {
        display: grid;
        grid-template-columns: 200px auto 200px;
        grid-template-rows: 1fr;
        height: 200px;
    }

    .center {
        grid-area: 1 / 2 / 2 / 3;
        background: deepskyblue;
    }

    .left {
        grid-area: 1 / 1 / 2 / 2;
        background: skyblue;
    }

    .right {
        grid-area: 1 / 3 / 2 / 4;
        background: skyblue;
    }

to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Participants