• css实现自适应宽度布局


    1.实现左侧宽度固定,右侧全屏自适应。

    body{margin:0;padding:0}
    .wrap{ 100%; float:left}
    .content{ height:300px;background:green; margin-left:200px}
    .right{ 200px; height:300px; background:red; float:left; margin-left:-100%}
    
    <body>
    <div class="wrap">
        <div class="content">content</div>
    </div>
    <div class="right">aside</div>
    </body>

    2.实现左侧与右侧宽度固定,中间部分全屏自适应。

    <style type="text/css">
    body{margin:0;padding:0}
    .wrap{ width:100%; float:left}
    .content{ height:300px;background:green; margin-left:200px;margin-right:200px}
    .left{ width:200px; height:300px; float:left; background:yellow; margin-left:-100%}
    .right{ width:200px; height:300px; background:red; float:left; margin-left:-200px}
    </style>
    
    <body>
    <div class="wrap">
        <div class="content">content</div>
    </div>
    <div class="left">aside</div>
    <div class="right">aside</div>
    </body>
  • 相关阅读:
    WebGL_0008:支持移动端的控制台调试工具
    调整两数组元素使得两数组差值最小
    集五福
    打印机顺序打印
    子弹分发
    字符串分割
    乐观锁、悲观锁
    字符串去重
    数组最后剩下的数字
    shell常用工具
  • 原文地址:https://www.cnblogs.com/pengpenglin/p/4694420.html
Copyright © 2020-2023  润新知