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>
  • 相关阅读:
    Unity周记: 2020.09.07-09.13
    Unity周记: 2020.08.31-09.06
    CF1060F Shrinking Tree
    洛谷P6783 [Ynoi2008] rrusq
    洛谷P5644 [PKUWC2018] 猎人杀
    洛谷P1587 [NOI2016] 循环之美
    洛谷P4466 [国家集训队] 和与积
    集合幂级数杂题
    Flink基础(49):FLINK SQL(25) 内置函数(七)表值函数
    Flink基础(48):FLINK SQL(24) 内置函数(六)条件函数
  • 原文地址:https://www.cnblogs.com/jdsm/p/3522572.html
Copyright © 2011-2022 走看看