zoukankan      html  css  js  c++  java
  • 两列左列浮动,右列自适应宽度的四种方法

    第一种方法,网上流传比较广的方法。采用左列 left 浮动,右列不浮动,采用 margin-left 定位的方式。此方法会有一个 ie6 3px bug . 另外,当浏览器框缩小到一定程度时,右侧会掉下来。

    <!DOCTYPE html>
    <html>
    <head>
    <title>方法一</title>
    <style type="text/css">
    #left
    {width:100px;height:100px;background-color:#ccc;border:2px solid #333;float:left;}
    #right
    {height:300px;margin-left:104px; border:2px solid #333;background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;
    }
    </style>
    </head>
    <body>
       <div id="left"> left </div>
       <div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />111<br />11</div>
    </body>
    </html>

    第二种方法:采用左列向左浮动,右列绝对定位。为解决 ie6 下右列不撑开问题,在右列中设置一元素右浮动 ( 不是个好方法 )。

    <!DOCTYPE html>
    <html>
    <head>
    <title>方法二</title>
    <style type="text/css">
    #sidebar
    {width:100px;height:100px;float:left;background-color:#cccccc;border:2px solid #333333;}
    #Wrap
    {position:absolute;left:113px;right:5px;height:300px;border:2px solid #333333;
       background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
    #floatSpan {float:right;} //for ie6
    </style>
    </head>
    <body>
    <div id="sidebar"> left </div>
    <div id="Wrap"> right<br />right<br />right<br />right<br />right<br />right<br />
    right<br />right<br />right<br /> <span id="floatSpan"><span>
    </div>
    </body>
    </html>

    此中 wrap 的 right:0; 本是为撑开右列而设置。无奈 ie6 下无效。故设置了 floatSpan。有此之后,去除 float:right 也无影响于效果。

    第三种方法,左列使用绝对定位,右列使用 margin-left 定位。

    (个人认为此法仍然是最好的方法。)

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .left{width:100px;height:100px;background-color:#ccc;border:2px solid #333; position:absolute;left:0; top:0; }
    .right{height:300px;margin-left:104px;border:2px solid #333;background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
    </style>
    </head>
    <body>
    <div style="position:relative;overflow:hidden;100%;"> <!-- 使用width是为了解决ie6下的bug -->
       <div class="left"> left </div>
       <div class="right"> right<br />right<br />right<br />right<br />right<br />
    right<br />right<br />right<br />right</div>
    </div>
    </body>
    </html>

    纵观前面的几种方法,不是使用了 margin-left 定位,就是借助 position 的 left 定位,这两种定位方法,都需要事先知道 left 列的宽度,扩展性上不是很好。

    那么,抛弃这两种定位方法,可不可以呢?也许你要说,CSS 中定位的方法也就只有这两种,抛弃这两种定位方法,就没有其他定位方法了。难道不用定位也成?

    没错。

    第四种方法,我们可以借助 ie 下的 haslayout 让 right 列触发 haslayout。而 FF 下则使用 overflow:hidden( 这个的原理不是很理解 )。

    <!DOCTYPE html>
    <html>
    <head>
    <title>利用haslayout</title>
    <style type="text/css">
    #left
    {float:left;width:100px;height:100px;background-color:#ccc;border:2px solid #333;
    }
    #right
    {overflow:hidden;zoom:1; border:2px solid #333;background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;
    }
    </style>
    </head>
    <body>
       <div id="left"> left </div>
       <div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111
    <br />111<br />11</div>
    </body>
    </html>
  • 相关阅读:
    unity小记
    Animator 设置动画效果
    Animation(动画效果)
    蜜蜂游戏 小结
    unity 协同
    camera render texture 游戏里的监控视角
    Mybatis框架 第一天
    BOS项目 第12天(总结)
    BOS项目 第11天(activiti工作流第三天,流程实例管理、项目中的用户和角色同步到activiti的用户和组表、设计物流配送流程、启动物流配送流程、组任务操作(查询、拾取)、个人任务操作(查询、办理))
    BOS项目 第10天(activiti工作流第二天,流程变量、组任务、排他网关、spring整合activiti、项目中实现流程定义管理)
  • 原文地址:https://www.cnblogs.com/sakura-panda/p/4455498.html
Copyright © 2011-2022 走看看