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

发布时间：2020-12-29 发布网站：编程之家

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

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

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

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里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。

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

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

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

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

css代码：

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

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

html结构：

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

html结构：


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

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

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

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您喜欢交流学习经验，点击链接加入编程之家官方QQ群：1065694478

猜你在找的HTML相关文章

编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ，选择关注！

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容！