圣杯布局

最新推荐文章于 2024-07-17 16:42:38 发布

释汐宇辰

最新推荐文章于 2024-07-17 16:42:38 发布

阅读量405

点赞数

分类专栏：移动web 文章标签：圣杯布局

本文链接：https://blog.csdn.net/chengjiamei/article/details/52551396

版权

移动web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            min-width: 700px;
            margin: 0 auto;
        }
        .container{
            height: 300px;
            padding: 0 250px 0 200px;


        }

        .column{
            float: left;
            height: 300px;
        }

        .left {
            width: 200px;
            background-color: pink;
            margin-left: -100%;
            position: relative;
            left: -200px;
            
        }

        .right {
            width: 250px;
            background-color: purple;
            margin-right: -250px;
            position: relative;

        }

        .main {
            width: 100%;
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="column main">
           	反对撒上点发生地方 士大夫撒点发生d f s d f s d f sa d fa s d
		反对撒上点发生地方 士大夫撒点发生d f s d f s d f sa d fa s d
		反对撒上点发生地方 士大夫撒点发生d f s d f s d f sa d fa s d
        </div>        <div class="column left"></div>        <div class="column right"></div>    </div></body></html>
有了宽度的盒子，要谨慎添加padding值