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>
    

      

  • 相关阅读:
    IoC 中 car 对象的配置如下,现在要添加 user 对象,并且将 car 注入到 user 中,正确的配置是?
    说说 IoC 中的继承和 Java 继承的区别
    bean 的 scope 有几种类型?请详细列举。
    简单谈谈 IoC 容器的原理
    谈谈你对 Spring IoC 和 DI 的理解,它们有什么区别?
    day13-14 内置函数
    day12 生成器(重要)
    day11 闭包和迭代器
    day10 函数进阶
    day09 函数
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/3652280.html
Copyright © 2011-2022 走看看