CSS: Three Column Layout

  1. margin
    
"en">


  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  



  
    class="container">
    
    class="left">
    
    
    class="right">
    
    
    class="main">
  2. flex
    
"en">


  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  



  
    class="container">
    
    class="left">
    
    
    class="main">
    
    
    class="right">
  3. display: table
    
"en">


  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  



  
    class="container">
    
    class="left">
    
    
    class="main">
    
    
    class="right">
  4. position
    
"en">


  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  



  
    class="container">
    
    class="left">
    
    
    class="right">
    
    
    class="main">
  5. calc
    
"en">

  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  


  
    class="wrapper">
    
    class="side left">left
    
    
    class="side right">right
    
    
    class="main">main

  6. 子 absolute, 父 relative
    
"en">

  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  


  
    class="outer">
    
    class="inner left">01
    
    
    class="inner main">02
    
    
    class="inner right">03

  7. flex

    
"en">


  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  



  
    class="outer">
    
    class="inner left">01
    
    
    class="inner main">02
    
    
    class="inner right">03

  8. table

    
"en">


  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  



  
    class="outer">
    
    class="inner left">01
    
    
    class="inner main">02
    
    
    class="inner right">03

  9. display: grid

    
"en">


  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  



  
    class="outer">
    
    class="inner left">01
    
    
    class="inner main">02
    
    
    class="inner right">03

  10. Grail Layout 圣杯布局

    
"en">


  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  



  
    class="outer">
    
    class="inner main">main
    
    
    class="inner left">left
    
    
    class="inner right">right
    
  
    



    
"en">


  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  



  
    class="container">
    
    class="main">main
    
    
    class="left">left
    
    
    class="right">right

  11. 双飞翼布局

    
"en">


  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  




  
    header
    
  
    class="wrapper">
    
    main
    
  
    
  
    class="left">left
    
  
    class="right">right
    

  
    footer

html&ampcss

相关

HTML & CSS – Styling List

HTML & CSS 学习笔记

看界面控件DevExpress WinForm如何使用HTML & CSS 语法编辑器

HTML & CSS 学习总结

HTML & CSS 部分

标签