• css实现右侧固定宽度,左侧宽度自适应


    反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。

    一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧?

    1,固定宽度区浮动,自适应区不设宽度而设置 margin

    html

    <div id="wrap">
      <div id="sidebar" style="height:240px;">固定宽度区</div>
      <div id="content" style="height:340px;">自适应区</div>
    </div>
    <div id="footer">后面的一个DIV,以确保前面的定位不会导致后面的变形</div>
    

    代码中的#wrap的div,是用来包裹我们要定位的这两个区的;他后面还有个#footer,用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了,那证明我们的定位方法必须改进。

    CSS代码如下:

    #wrap {
        overflow: hidden; *zoom: 1;
      }
      #content ,#sidebar {
        background-color: #eee; 
      }
      #sidebar {
        float: right;  300px;
      }
      #content {
        margin-right: 310px;
      }
      #footer {background-color: #f00;color:#fff; margin-top: 1em}
    

    要注意html中必须使用div标签,不要妄图使用什么p标签来达到目的。因为div有个默认属性,即如果不设置宽度,那他会自动填满他的父标签的宽度。这里的content就是例子。

    当然我们不能让他填满了,填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在右边,所以我们设置content的margin-right值,值比sidebar的宽度大一点点——以便区分他们的范围。例子中是310.

    假设content的默认宽度是100%,那么他设置了margin后,他的宽度就变成了100%-310

    缺点:

    但实际上这个方法有个很老火的限制——html中sidebar必须在content之前

    但我需要sidebar在content之后!因为我的content里面才是网页的主要内容,我不想主要内容反而排在次要内容后面。

    但如果sidebar在content之后,那上面的一切都会化为泡影。

    2,固定宽度区使用绝对定位,自适应区照例设置margin

    <div id="wrap">
      <div id="content" style="height:340px;">自适应区,在前面</div>
      <div id="sidebar" style="height:240px;">固定宽度区</div>
    </div>
    

    css

    #wrap {
        *zoom: 1; position: relative;
      }
      #sidebar {
         300px; position: absolute; right: 0; top: 0;
      }
      #content {
        margin-right: 310px;
      }
    

    缺点:

    footer怎么还是在那儿呢?怎么没有自动往下走呢?footer说——我不给绝对主义者让位!

    其实这与footer无关,而是因为wrap对sidebar的无视造成的——你再长,我还是没感觉。

    看来这种定位方式只能满足sidebar自己,但对他的兄弟们却毫无益处。

    3,float与margin齐上阵

    经过前面的教训,我们重新确立了这个自适应宽度布局必须要达成的条件:

    1. sidebar宽度固定,content宽度自适应
    2. content要在sidebar之前
    3. 后面的元素要能正常定位,不能受影响

    由于绝对定位会让其他元素无视他的存在,所以绝对定位的方式必须抛弃。

    如果content和sidebar一样,都用float,那content的自适应宽度就没戏了;如果不给content加float,那sidebar又会跑到下一行去。

    所以,最终我决定:float与margin都用。

    我打算把content的宽度设为100%,然后设置float:left,最后把他向左移动310,以便于sidebar能挤上来。

    但这么一来content里面的内容也会跟着左移310,导致被遮住了,所以我们要把他重新挤出来。为了好挤,我用了一个额外的div包裹住内容,所以html结构变成了这种样子:

    <div id="wrap">
      <div id="content" style="height:140px;">
        <div id="contentb">
          content自适应区,在前面
        </div>
      </div>
      <div id="sidebar" style="height:240px;">sidebar固定宽度区</div>
    </div>
    

    css这样

    #sidebar {
         300px; float: right;
      }
      #content {
        margin-left: -310px; float: left;  100%;
      }
      #contentb {
        margin-left: 310px;
      }
    

    这样一改,真正的“content”就变成了contentb,他的宽度跟以前的content一样,是100%-310.

    大家可能注意到了代码中的两个margin-left,一个-310px一个310px,最后结合起来相当于什么都没干。但他确实解决了content与sidebar的顺序问题。

    这个方法的缺点:

    就是:太怪异,以及额外多了一层div。

    4,标准浏览器的方法

    当然,以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。

    那就简单了:把wrap设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度,那么content的宽度就变成自适应了。

    代码很少,而且不会有额外标签。不过这是IE7都无效的方法。

    总结

    如果不考虑ie7及以下版本,则使用标准方法;如果不在意sidebar与content的顺序,则用第一种方法;否则用第3种方法。

  • 相关阅读:
    Linux常用命令大全
    Shell常用命令整理
    登录织梦后台提示用户名不存在的解决方法介绍
    dedecms系统后台登陆提示用户名密码不存在
    dede被注入后台提示用户名不存在解决方法
    织梦dedecmsV5.7联动类型无法显示的处理方法
    漏洞安全防范
    Sublime 安装、插件CoolFormat
    如何查看sublime安装了哪些插件
    本地如何使用phpstudy环境搭建多站点
  • 原文地址:https://www.cnblogs.com/tantry/p/4414100.html
Copyright © 2020-2023  润新知