CSS实现两列布局,一列固定宽度,一列宽度自适应方法

前端之家收集整理的这篇文章主要介绍了CSS实现两列布局,一列固定宽度,一列宽度自适应方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

不管是左是右,反正就是一边宽度固定,一边宽度自适应。

博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式。

HTML代码

  1. <div id="wrap">
  2. ="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div="content"="height:500px;background:#000;color:#fff;">自适应区>
  3. >

实现方式方式有如下几种:

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

我们以右侧宽度固定,左侧宽度自适应为例:

css代码

  1. #sidebar {
  2. float: right; width: 300px;
  3. }
  4. #content {
  5. margin-right: 300px;
  6. }

实现效果图:

右侧一直固定不动,左侧根据屏幕的剩余大小自适应。

但实际上这个方法是有局限性的,那就是html结构中sidebar必须在content之前才行

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

那么上面讲解的第一种方法就无效了。

就需要下面的方法来实现。

2.float与margin配合使用

首先我们调整一下html结构:

  1. >
  2. class="contentInner">
  3. 自适应区
  4. >

css代码

  1. #content {
  2. margin-left: -300px; float: left; 100%;
  3. }
  4. #content .contentInner{300px;
  5. }
  6. #sidebar { 300px;
  7. }

这样实现,contentInner的实际宽度就是屏幕宽度-300px。

3.固定宽度区使用绝对定位,自适应区设置margin

html结构:

  1. >我现在的结构是在前面#wrap{
  2. position:relative;
  3. }absolute;
  4. width:300px;
  5. right:0;
  6. top:0;
  7. }

4.使用display:table实现

html结构:

  1. display:table;100%;
  2. }table-cell;
  3. }
  4. width:table-cell;
  5. }

当然最后一种方法在IE7以及以下浏览器不兼容,因为IE7设置display为table不识别。

猜你在找的HTML相关文章