自适应的两栏布局

 

　　在很多的网站上我们都会看到这样的效果——自适应两栏布局。那么它和两栏布局又有什么区别呢？下面我们一起来研究一下。

　　一、什么是自适应两栏布局

　　当我们调整浏览器的宽度时，我们希望其中的一个比较重要的分栏保持不变；而另一个分栏能随着浏览器宽度的变化自动的调节自己的宽度，而其内容自动的换行，不会出现横向的滚动条或浏览器遮挡内容的情况。

　　

　　二、如何做到自适应两栏布局

　　以左面固定、右边自适应为例。下面我提供两种方法：

　　方法一：

　　既然是这样的效果，自然是一个设置宽度，另一个不设置宽度。我们将左边的向左浮动并设置固定宽度，右边的用margin-left留出站位宽度，而内容区自适应。

　　

<div class="auto_box_1">
          <div class="ab1_l"><p>左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变</p></div>
          <div class="ab1_r"><p>1右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变</p></div>
</div>

.auto_box_1 {
    overflow: hidden;
}

.ab1_l {
    width: 100px;
    height: 200px;
    float: left;
    background-color: #ff0000;
}

.ab1_r {
    margin-left: 101px;
    height: 200px;
    background-color: #00ff00;
    width: auto;

}

　　方法二：

　　这一次我们让两个都浮动，一个设置宽度，另一个自动。等一下，如果你认为我疯了，那么说明你的基本功很扎实。浮动的效果是尽最大的可能向某一个方向上靠。但是如果这一行空间不够，就会跑到下一行。设置为自动的分栏会充满本行，不会让另一个分栏共享一行。答案当然是留出空间给定宽的分栏。不卖关子，我们使用“负边距”的方法。

<div class="auto_box_2">
          <div class="ab2_l"><p>左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变</p></div>
          <div class="ab2_r"><p>2右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变</p></div>
</div>

.auto_box_2 {
    overflow: hidden;
    margin-top: 100px;
}

.ab2_l {
    width: 100px;
    height: 200px;
    float: left;
    background-color: #ff0000;
}

.ab2_r {
    margin-right: -101px;
    height: 200px;
    background-color: #00ff00;
    width: 100%;
    float: right;
}