zoukankan      html  css  js  c++  java
  • CSS 负边距自适应布局

    单列定宽单列自适应布局

     
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>单列定宽单列自适应布局</title>
        <style type="text/css">
            * {margin:0;padding:0;}
            .cont, .side {float:left;}
            .cont {100%;}
            .main {margin-right:200px;background:#DDDDDD;}
            .side {margin-left:-200px;200px;background:#F7F7F7;}
        </style>
    </head>
    <body>
        <div class="cont">
            <div class="main">main</div>
        </div>
        <div class="side">side</div>
    </body>
    </html>
    

      左右定宽中间自适应布局

     
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>左右定宽中间自适应布局</title>
        <style type="text/css">
            * {margin:0;padding:0;}
            .cont, .side, .sub-main {float:left;}
            .cont {100%;}
            .main {margin-right:200px;margin-left:300px;background:#DDDDDD;}
            .side {margin-left:-200px;200px;background:#F7F7F7;}
            .sub-main {margin-left:-100%;300px;background:#F7F7F7;}
        </style>
    </head>
    <body>
        <div class="cont">
            <div class="main">main</div>
        </div>
        <div class="side">side</div>
        <div class="sub-main">sub-main</div>
    </body>
    </html>
    

      两列等高自适应布局

     
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>两列等高自适应布局</title>
        <style type="text/css">
            * {margin:0;padding:0;}
            .layout {overflow:hidden;}
            .cont, .side {float:left;padding-bottom:9999px;margin-bottom:-9999px;}
            .cont {100%;}
            .main {margin-right:200px;background:#DDDDDD;}
            .side {margin-left:-200px;200px;background:#F7F7F7;}
        </style>
    </head>
    <body>
        <div class="layout">
            <div class="cont">
                <div class="main">
                    main
                    <br/><br/><br/><br/><br/><br/><br/>
                </div>
            </div>
            <div class="side">side</div>
        </div>
    </body>
    </html>
    

      

  • 相关阅读:
    BOM
    no response from Graphic Screen Painter Exiting
    Windows Mobile 中模拟按键
    C# 获取汉字拼音首字母
    Web Service介绍
    .net/c#中栈和堆的区别及代码在栈和堆中的执行流程详解
    使用JSON加速AJAX(By Sean Kelly)
    Sql字符串操作函数
    一个简单AJAX注册示例
    .Net平台开发的技术规范与实践精华总结
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/3652280.html
Copyright © 2011-2022 走看看