css实现二列宽度自适应实例

作者：袖梨 2022-06-25

从二列固定宽度入手，开始尝试二列布局的情况下，左右栏宽度能够做到自适应，从一列自适应布局中我们知道，设定自适应主要通过宽度的百分比值设置，因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计，继续上面的CSS代码，我们得新定义二列的宽度值：

代码如下	复制代码
#left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 20%; } #right { background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px; width: 70%; }

左栏宽度设置为宽度20%，右栏宽度设置为宽度的70%，看上去像一个左侧为导航，右侧为内容的常见网页形式。

代码如下

复制代码

二列宽度自适应——111com.net

左列——(111com.net)

右列——二列宽度自适应(111com.net)

为什么没有将右栏设置为80%，从而实现整体100%的效果？
这个问题的原因还得从对象的其它属性说起，大家应该还记得，为了使布局在预览中更清楚，我们使用了border属性，使得两个对象都具有1px的边框，而在CSS布局中，一个对象的宽度，不仅仅由width值来决定，一个对象的真实宽度是由对象本身的宽、对象的左右边距，以及左右边框，还有内边距这些属性相加而成，因此左面的对象不仅仅是浏览器窗口的20%的宽度，还应该加上左边的边框的宽度。这样算下来左右栏都超出了自身的百分比宽度，最终的宽度也超过了浏览器窗口的宽度，因此右栏将被挤掉第二行显示，从而失去了左右分栏的效果，因此这里使用了并非100%的宽度之和，而在实际应用之中，可以通过避免边框及边距的使用，而达到左右与浏览器填满的效果。这样一个有关宽度计算的问题，是CSS布局中相当重要的被称为为盒模型的问题，在以后的教程中会详细讲解

两列左列浮动，右列自适应宽度

采用左列 left 浮动，右列不浮动，采用 margin-left 定位的方式。此方法会有一个 ie6 3px bug . 另外，当浏览器框缩小到一定程度时，右侧会掉下来。

代码如下

复制代码

方法一

left

1111
1111
1111
1111
1111
1111
111
11

一起先来看看这个面试题的具体要求吧：

1.左侧固定宽，右侧自适应屏幕宽；
2.左右两列，等高布局；
3.左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）
4.要求不用JS或CSS行为实现；
仔细分析试题要求，要达到效果其实也并不是太难，只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事：

1.左边固定，右边自适应布局，这个第一点应该来说是非常的容易，实现的方法也是相当的多，那么就可以说第一条要求已不是什么要求了；
2.左右两列等高布局，这一点相对来说要复杂一些，不过你要是了解了怎么实现等高布局，那么也是不难。我个人认为这个考题关键之处就在考这里，考你如何实现等高布局；所以这一点你需要整明白如何实现；
3.至于第三条要求，应该来说是很方面的，我们随处都可以看到实现最小高度的代码；
4.第四条这个要求我想是考官想让我们面试的人不能使用js来实现等高布局和最小高度的功能。
上面简单的分析了一下实现过程，那么最终关键之处应该是就是“让你的代码要能同时实现两点，其一就是左边固定，右边自适应的布局；其二就是实现两列等高的布局”，如果这两个功能完成，那么你也就可以交作业了。那么下面我们就先来看看这两点是如合实现：

一、两列布局：左边固定宽度，右边自适应宽度
这样的布局，其实不是难点，我想很多同学都有实现过，那么我就在此稍微介绍两种常用的方法：

方法一：浮动布局

这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

HTML Markup

代码如下

复制代码

Left sidebar

Main Content

CSS Code

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值，大家可以点击查看上面代码的DEMO

方法二：浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果，大家可以仔细对比一下上面那种实现方法，看看两者有什么区别：

HTML Markup

代码如下

复制代码

Left Sidebar

Main Content

CSS Code

  *{
   margin: 0;
   padding: 0;
  }
  #left {
   background-color: green;
   float: left;
   width: 220px;
   margin-right: -100%;
  }

  #content {
   float: left;
   width: 100%;
  }

  #contentInner {
   margin-left: 220px;/*==等于左边栏宽度值==*/
   background-color: orange;
  }

这种方法看上去要稍微麻烦一点，不过也是非常常见的一种方法，大家可以看看他的DEMO效果。感觉一下，和前面的DEMO有什么不同之处。

我在这里就只展示这两种方法，大家肯定还有别的实现方法，我就不在多说了，因为我们今天要说的不是这个问题。上面完成了试题的第一种效果，那么大家就要想办法来实现第二条要求——两列等高布局。这一点也是本次面试题至关重要的一点，如果你要是不清楚如何实现等高布局的话，我建议您先阅读本站的《八种创建等高列布局》，里面详细介绍了八种等高布局的方法，并附有相关代码，而且我们后面的运用中也使用了其中的方法。

现在关键的两点都完成了，那么我们就需要实现第三条要求，实现最小高度的设置，这个方法很简单：

代码如下	复制代码
min-height: 200px; height: auto !important; height: 200px;

上面的代码就轻松的帮我们实现了跨浏览器的最小高度设置问题。这样一来，我们可以交作业了，也完面了这个面试题的考试。为了让大家更能形象的了解，我在这里为大家准备了五种不同的实现方法：

方法一：

别的不多说，直接上代码，或者参考在线DEMO，下面所有的DEMO都有HTML和CSS代码，感兴趣的同学自己慢慢看吧。

代码如下

复制代码

HTML Markup

Main Content

CSS Code

。

方法二

HTML Markup

Left Sidebar

Main Content

CSS Code

查看在线的DEMO。

方法三：

HTML Markup

Main Content

CSS Code

   *{margin: 0;padding: 0;}
   #container{
     background-color:#0ff;
     overflow:hidden;
     padding-left:220px; /* 宽度大小等与边栏宽度大小*/
   }
   * html #container{
     height:1%; /* So IE plays nice */
   }
   #content{
     background-color:#0ff;
     width:100%;
     border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/
     margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
     float:right;
   }
   #sidebar{
     background-color:#f00;
     width:220px;
     float:right;
     margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
   }
   #content,
   #sidebar {
     min-height: 200px;
     height: auto !important;
     height: 200px;
   }
效果。

方法四：

HTML Markup

Left Sidebar

Main Content

CSS Code

  *{padding: 0;margin:0;}
  #container2 {
    float: left;
    width: 100%;
    background: orange;
    position: relative;
    overflow: hidden;
    }
    #container1 {
    float: left;
    width: 100%;
    background: green;
    position: relative;
    left: 220px;/* 宽度大小等与边栏宽度大小*/
    }

    #col2 {
    position: relative;
    margin-right: 220px;/* 宽度大小等与边栏宽度大小*/
    }

    #col1 {
    width: 220px;
    float: left;
    position: relative;
    margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
    }

   #col1,#col2 {
    min-height: 200px;
    height: auto !important;
    height: 200px;
   }
。

方法五：

HTML Markup

Left Sidebar

Main Content

CSS Code

  *{padding: 0;margin: 0;}
  #container1 {
   float: left;
   width: 100%;
   overflow: hidden;
   position: relative;
   background-color: #dbddbb;
  }
  #container {
   background-color: orange;
   width: 100%;
   float: left;
   position: relative;
   left: 220px;/* 宽度大小等与边栏宽度大小*/
  }
  #left {
   float: left;
   margin-right: -100%;
   margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
   width: 220px;
  }
  #content {
   float: left;
   width: 100%;
   margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
  }
  #contentInner {
   margin-left: 220px;/* 宽度大小等与边栏宽度大小*/
   overflow: hidden;
  }

  #left,
  #content {
    min-height: 200px;
    height: auto !important;
    height: 200px;
  }
。

针对上面的面试题要求，我一共使用了五种不同的方法来实现，经过测试都能在各浏览器中运行，最后我有几点需要特别提出：

1.上面所有DEMO中，要注意其方向性的配合，并且值要统一，如果您想尝试使用自己布局需要的宽度值，请对照相关代码环节进行修改；
2.上面所有DEMO中，没有设置他们之间的间距，如果您想让他们之间有一定的间距，有两种方法可能实现，其一在上面的DEMO基础上修改相关参数，其二，在相应的里面加上"div"标签，并设置其“padding”值，这样更安全，不至于打破你的布局
3.因为我们这里有一列使用了自适应宽度，在部分浏览器下，当浏览器屏幕拉至到一定的大小时，给我们带来的感觉是自适应宽度那栏内容像是被隐藏，在你的实际项目中最好能在“body”中加上一个“min-width”的设置。

css实现二列宽度自适应实例

相关文章

精彩推荐