布局神器display:table-cell

最新推荐文章于 2022-11-28 01:49:59 发布

置顶

最骚的就是你

最新推荐文章于 2022-11-28 01:49:59 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端学习

本文链接：https://blog.youkuaiyun.com/libin_1/article/details/52486073

本文介绍了如何利用CSS的display:table-cell属性来实现元素两端对齐、自动平均划分、图片垂直居中、两box等高对齐以及弹性响应式布局。通过实例展示，展示了table-cell在布局中的强大功能。

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

元素两端对齐

第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做：

 
         * { 
           
         box-sizing: border-box; 
        
         } 
        
         .content { 
           
         display 
         : table; 
        
         border 
         :  
         1px  
         solid  
         #06c 
         ; 
        
         padding 
         :  
         15px  
         5px 
         ; 
        
         max-width 
         :  
         1000px 
         ; 
        
         margin 
         :  
         10px  
         auto 
         ; 
        
         min-width 
         :  
         320px 
         ; 
        
         width 
         :  
         100% 
         ; 
        
         } 
        
         .box { 
           
         width 
         :  
         100px 
         ; 
        
         height 
         :  
         100px 
         ; 
        
         border 
         :  
         1px  
         solid  
         #ccc 
         ; 
        
         text-align 
         :  
         center 
         ; 
        
         display 
         : inline- 
         block 
         ; 
        
         font-size 
         :  
         40px 
         ; 
        
         line-height 
         :  
         100px 
         ; 
        
         } 
        
         . 
         right  
         { 
           
         text-align 
         :  
         right 
         ; 
        
         display 
         :  
         table-cell 
        
         } 
        
         . 
         left  
         { 
           
         text-align 
         :  
         left 
         ; 
        
         display 
         :  
         table-cell 
        
         }

 
         < 
         div  
         class="content"> 
        
         < 
         div  
         class="left"> 
        
         < 
         div  
         class="box">B</ 
         div 
         > 
        
         </ 
         div