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

Mars-xq

已于 2023-09-06 09:20:32 修改

阅读量309

点赞数 1

文章标签： css 前端

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

本文链接：https://blog.csdn.net/sinat_31057219/article/details/106257399

版权

一、准备


<!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>

在这里插入图片描述

二、设置left

margin-left 百分比-20%
在这里插入图片描述
margin-left 百分比-50%

margin-left 百分比-80%
margin-left 百分比-100% ：可见移动了父容器的一个宽度

在这里插入图片描述再相对left自己移动父容器的paddingleft宽度即可完成left

设置right

margin-left：60px

在这里插入图片描述
margin-left：-60px
再相对right自己移动父容器的paddingright宽度即可完成right

注意：操作left和right的布局时，main布局宽高不变，left和right可能会覆盖main

Mars-xq

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css : 圣杯布局的margin-left百分比：-100%

一、准备<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .cleanfix { clear:
复制链接

扫一扫