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 {width:100%;}
    .main {margin-right:200px;background:#DDDDDD;}
    .side {margin-left:-200px;width: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 {width:100%;}
    .main {margin-right:200px;margin-left:300px;background:#DDDDDD;}
    .side {margin-left:-200px;width:200px;background:#F7F7F7;}
    .sub-main {margin-left:-100%;width: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 {width:100%;}
    .main {margin-right:200px;background:#DDDDDD;}
    .side {margin-left:-200px;width: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>
  • 相关阅读:
    通过this调用本类属性和本类方法
    使用构造方法接收引用数据类型
    JAVA回形数
    Bt(宝塔面板)忘记用户名密码的解决方案
    关于xshell远程连接密码呈现灰色无法填写的问题
    ubunt系统创建定时任务
    阿里云服务器如何初始化
    解决laravel 配置路由时除 “/”路由 以外 ,所有路由访问不到的情况
    laravel 5.2 使用 captcha 实现 验证码
    在laravel中如何使用事务
  • 原文地址:https://www.cnblogs.com/jdsm/p/3522572.html
Copyright © 2011-2022 走看看