自适应的两栏布局

最新推荐文章于 2024-09-07 01:53:51 发布

转载最新推荐文章于 2024-09-07 01:53:51 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webARM/p/3781837.html

本文详细介绍了自适应两栏布局的概念，并提供了两种实现方式。通过改变浏览器宽度，左侧栏保持固定宽度，右侧栏自动调整宽度以适应内容，避免出现横向滚动条或浏览器遮挡内容的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

　　方法一：

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

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

 1 .auto_box_1 {
 2     overflow: hidden;
 3 }
 4 
 5 .ab1_l {
 6     width: 100px;
 7     height: 200px;
 8     float: left;
 9     background-color: #ff0000;
10 }
11 
12 .ab1_r {
13     margin-left: 101px;
14     height: 200px;
15     background-color: #00ff00;
16     width: auto;
17 
18 }

　　方法二：

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

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

 1 .auto_box_2 {
 2     overflow: hidden;
 3     margin-top: 100px;
 4 }
 5 
 6 .ab2_l {
 7     width: 100px;
 8     height: 200px;
 9     float: left;
10     background-color: #ff0000;
11 }
12 
13 .ab2_r {
14     margin-right: -101px;
15     height: 200px;
16     background-color: #00ff00;
17     width: 100%;
18     float: right;
19 }