zoukankan      html  css  js  c++  java
  • 负边距实现圣杯布局

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
    
        <title>Document</title>
        <style type="text/css">
            .left,
            .middle,
            .right {
                position: relative;
                float: left;
                min-height: 400px;
            }
    
            .container {
                padding: 0 200px;
                overflow: hidden;
            }
    
            .left {
                width: 200px;
                left: -200px;
                margin-left: -100%;
                background: yellow;
            }
    
            .right {
                width: 200px;
                right: -200px;
                margin-left: -200px;
                background: purple;
            }
    
            .middle {
                width: 100%;
                background: orange;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="middle">
                我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局
            </div>
            <div class="left">左左</div>
            <div class="right">右右</div>
        </div>
    </body>
    
    </html>
  • 相关阅读:
    groovy-搭建环境
    isAssignableFrom
    H5调用摄像头
    php生成唯一id
    剑指Offer刷题日常
    ASCII码对照表
    用redis stream作队列的一些心得
    在 CAP 中使用 AOP ( Castle.DynamicProxy )
    office2019下载
    JVM调优浅谈
  • 原文地址:https://www.cnblogs.com/wujf/p/14171491.html
Copyright © 2011-2022 走看看