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

概述不管是左是右，反正就是一边宽度固定，一边宽度自适应。 博客园的很多主题也是这样设计的，我的博客也是右侧固定宽度，左侧自适应屏幕的布局方式。 html代码： 实现方式方式有如下几种： 1.固定宽度区浮动

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

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

HTML代码：

<div ID="wrap">  ="sIDebar" style="height:500px;background:red;color:#fff;">固定宽度区</div="content"="height:500px;background:#000;color:#fff;">自适应区>>

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

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

我们以右侧宽度固定，左侧宽度自适应为例：

CSS代码：

#sIDebar {  float: right; wIDth: 300px;}#content {  margin-right: 300px;}

实现效果图：

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

但实际上这个方法是有局限性的，那就是HTML结构中sIDebar必须在content之前才行！

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

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

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

2.float与margin配合使用

首先我们调整一下HTML结构：

>    class="contentInner">       自适应区    >

CSS代码：

#content {  margin-left: -300px; float: left; 100%;}#content .contentInner{300px;}#sIDebar { 300px;}

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

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

HTML结构：

>我现在的结构是在前面#wrap{  position:relative;}absolute;  wIDth:300px;  right:0;  top:0;}

4.使用display:table实现

HTML结构：

  display:table;100%;}table-cell;} wIDth:table-cell;}

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

总结

以上是内存溢出为你收集整理的CSS实现两列布局，一列固定宽度，一列宽度自适应方法全部内容，希望文章能够帮你解决CSS实现两列布局，一列固定宽度，一列宽度自适应方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。