复习一下两列布局。

最新推荐文章于 2020-09-21 16:52:51 发布

u011263845

最新推荐文章于 2020-09-21 16:52:51 发布

阅读量406

点赞数 1

分类专栏：前端开胃菜文章标签：布局

本文链接：https://blog.csdn.net/u011263845/article/details/51221885

版权

前端开胃菜专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <link rel="stylesheet" href="http://www.zhangweiwei.cn/demo/reset.css">
    <style>
        .wrap {
            width: 100%;
            height: 500px;
        }

        .left {
            width: 300px;
            height: 500px;
            float: left;
            background-color: yellow;
            margin-right: -100%;
        }

        .right {
            width: 300px;
            height: 500px;
            float: right;
            margin-left: -100%;
            background-color: red;
        }

        .main {
            width: 100%;
            float: left;
        }

        .main .content {
            margin-left: 320px;
            background-color: black;
            height: 500px;
        }

        .left1 {
            float: right;
            margin-left: -100%;
            margin-right: auto;
        }

        .main .content1 {
            margin-right: 320px;
            margin-left: auto;
        }

        .cont {
            margin-right: 320px;
            height: 500px;
            background-color: yellow;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <div class="left">

        </div>
        <div class="main">
            <div class="content"></div>
        </div>
    </div>
    <br>
    <div class="wrap">
        <div class="left left1">

        </div>
        <div class="main">
            <div class="content content1"></div>
        </div>
    </div>
    <br>
    <div class="wrap">
        <div class="main">
            <div class="cont">

            </div>
        </div>
        <div class="right">

        </div>
    </div>
    <br>
</body>

</html>

上班之余写着玩玩。居然觉得有点费脑。哈哈

u011263845

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复习一下两列布局。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>两列布局</title> <link rel="stylesheet" href="http://www.zhangweiwei.cn/demo/reset.css"> <style> .wrap {
复制链接

扫一扫

专栏目录