CSS单侧固定,另一侧宽度自适应

左侧宽度固定,右侧自适应,无论是左是右,反正就是一边宽度固定,一边宽度自适应。

HTML代码如下

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

方法一:固定宽度区浮动,自适应区不设宽度而设置 margin

我们拿右边定宽左边自适应来做示范,CSS代码如下:

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

其中,sidebar让他浮动,并设置了一个宽度;而content没有设置宽度。此方法应注意:html中sidebar必须在content之前

方法二:固定宽度区使用绝对定位,自适应区照例设置margin

我们把sidebar扔掉,只对content设置margin,那么我们会发现content的宽度就已经变成自适应了——于是content对sidebar说,我的宽度,与你无关。

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

注意:此方法会导致后面的div盒子错位;

方法三:w3c标准自适应法

w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了:把wrap设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度,那么content的宽度就变成自适应了。

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

赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » CSS单侧固定,另一侧宽度自适应
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏