左栏固定,右栏自适应布局

经常会看到这样的布局,比如博客左栏要放导航,宽度固定,右边显示内容,然后右栏的内容要根据窗口的缩放自适应。
第一种方法比较简单,也是大多数人比较常用的。

一、使用margin实现左固定右自适应

1.html代码

<div id="left"></div>

<div id="right"></div>

2.css代码

html,
 body {

      margin:0;

      padding:0;

    }

    #left

{

      width:100px;

      height:100px;

      background:red;

      float:left;

    }

    #right

{

      height:200px;

      background:yellow;

      margin-left:110px;

    }

3.实例演示

使用margin实现左固定右自适应

二、使用position:absolute实现的左固定右自适应

有的人可能会想说绝对定位也可以实现,暂时不考虑更复杂的情况,也可以算一种实现的方法。html结构不变

1.css代码

html,
 body {

      margin:0;

      padding:0;

    }

    #left

{

      width:100px;

      height:100px;

      background:red;

      position:absolute;

    }

    #right

{

      height:200px;

      background:yellow;

      margin-left:110px;

    }

2.实例演示

使用position:absolute实现的左固定右自适应
还有其他的方法吗?看一下w3c怎么实现的。

**左边的区域使用左浮动和定义宽度
右边的区域使用overflow:hidden,触发了Block Formatting Context,这样右边就会填满整个区域。**
把这个方法用到我们的例子,html结构不变

三、使用overflow:hidden实现的左固定右自适应

1.css代码

  1. 1.
html,  body {

          margin:0;

          padding:0;

        }

        #left

    {

          float:left;

          width:100px;

          height:100px;

          background:red;

          margin-right:10px;

        }

        #right

    {

          height:200px;

          background:yellow;

          overflow:hidden;

        }

最好用的是第三种
div1设成float:left;第二个div设成overflow:hidden; 完毕

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值