Css实现左栏固定宽度,右栏自适应宽度实例

作者:袖梨 2022-06-25

 代码如下 复制代码

   
   
   
           
            左栏固定宽度,右栏自适应之绝对定位法
           
   
   
           

                   
                   

                            右栏
                   

           

   
   

看起来很美好,但是。。

由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况:

 代码如下 复制代码

 

   
   
   
           
            左栏固定宽度,右栏自适应之绝对定位法
           
   
   
           


                   
                   

                            右栏
                   

           

           
   
   

我们再来看看第二种方法,左栏固定宽度,右栏自适应之负margin法:

 代码如下 复制代码

 

   
   
   
           
            左栏固定宽度,右栏自适应之负margin法
           
   
   
           


                   
                   

                            右栏
                   

           

   
   

这样无论两栏的高度如何变化都不会有问题了:

 代码如下 复制代码

 

   
   
   
           
            左栏固定宽度,右栏自适应之负margin法
           
   
   
           


                   
                   

                            右栏
                   

           

           
   
   

相关文章

精彩推荐