CSS两列布局的N种实现

　原理：两个元素都设置dislpay:inline-block，为了消除html空格的影响，父元素的font-size需要设置为0，右侧自适应元素的宽度使用calc函数计算。如果两个元素的高度不一样，可以给元素设置vertical-align:top调整。

　　　　缺点：由于父元素设置了font-size为0，子元素内文字不会显示

   

       

       

       

   

   

       

           

                1234

           

           

                1234

           

       

   

　　2.双浮动

　　　　原理：两个元素设置浮动，右侧自适应元素宽度使用calc函数计算

　　　　缺点：父元素需要清除浮动

   

       

       

       

   

   

       

           

               

                    123adadadddddddddddddddddddddddddddddddddddddddd

               

           

           

       

   

　　3.浮动+margin

　　　　原理：左侧定宽元素浮动，右侧自适应元素设置margin-left的值大于定宽元素的宽度即可

　　　　缺点：父元素需要清除浮动

   

       

       

       

   

   

       

           

               

1234

           

           

               

1234

           

       

   

　　4.浮动+BFC

　　　　原理：父元素设置overflow:hidden,左侧定宽元素浮动，右侧自适应元素设置overflow:auto创建BFC

　　　　缺点：左侧元素的内容如果超过设定宽度会重叠到右侧元素上

1

   

       

       

       

   

   

       

           

111111111111111111111111

           

111111111111111111111111111111111111111111111

       

       

   

　　5.absolute+margin-left

　　　　原理：父元素相对定位，左侧元素绝对定位，右侧自适应元素设置margin-left的值大于定宽元素的宽度

　　　　缺点：父元素设置了相对定位

   

       

       

       

   

   

       

           

           

       

   

　　6.flex布局

　　　　原理：父元素设置display：flex，自适应元素设置flex：1

　　　　缺点：存在兼容性问题，IE10以下不支持

   

       

       

       

   

   

       

           

           

       

   

亚马逊测评 www.yisuping.com