css : 圣杯布局的margin-left百分比：-100%

原创已于 2023-09-06 09:20:32 修改 · 530 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端

于 2020-05-21 14:48:55 首次发布

本文深入探讨了使用CSS进行网页布局的技巧，包括如何利用margin-left属性实现元素的精确位置调整，以及通过浮动和clearfix解决布局中常见的重叠问题。文章详细讲解了left和right布局的设置方法，以及在不改变main布局宽高的情况下，如何避免left和right元素覆盖main区域。

一、准备


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .cleanfix {
            clear: both;
        }

        .cleanfix:after {
            content: '.';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
            zoom: 1;
        }

        .head, .foot {
            width: 100%;
            height: 80px;
        }

        .head {
            background-color: #4eb5f7;
        }

        .foot {
            background-color: #999999;
        }

        .left, .right, .main {
            float: left;
        }

        .left {
            width: 40px;
            height: 60px;
            background-color: #B9E078;
            /*margin-left: -100%;*/
        }

        .right {
            width: 60px;
            height: 80px;
            background-color: #FF9900;
            /*margin-left: -60px;*/
        }

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

        .content {
            padding: 0 60px 0 40px;
        }

        .left {
            /*position: relative;*/
            /*left: -40px;*/
        }

        .right {
            /*position: relative;*/
            /*right: -60px;*/
        }
    </style>
</head>
<body>
<div class="head">head</div>
<div class="content cleanfix">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="foot">foot</div>
</body>
</html>