双飞翼布局

双飞翼布局

实现双飞翼布局的五种方法

  • 浮动
  • 绝对定位
  • flex布局
  • table
  • grid

浮动
浮动的实现,就是直接将左右两边的块实现左右浮动,中间实现自适应





    
    
    浮动
    



    
浮动布局

绝对定位
实现方法将三块div实现绝对定位,将左右两块div分别设置left和right为0,中间实现left和right各为左右两边的宽度





    
    
    绝对定位
    



    
absolute布局

flex布局

实现方式:将外层的块级元素设置flex,将中间的块级元素设置为flex:1





    
    
    flex
    



    
flex布局

表格布局

实现方式:将外层块级元素设置display:table,分别设置左右两个块级元素固定宽,中间块级元素自适应





    
    
    表格布局
    



    
table布局

grid布局

实现方式:外边框设置grid布局,并设置宽度为100% ,设置grid-template-rows和grid-template-columns





    
    
    grid布局
    



    
grid布局

你可能感兴趣的:(css,html)