Resolving multi-column layouts

<div class= "parent" ><div class= "left" ><p>left</p></div><div class= "right" ><p>right</p><p>right</p></div></div> Multi-column layouts One column fixed width another column adaptive(1) float + marginCompatibility is a bit of a problem, after IE7, no problem IE6 have a problem, there are 3 pixels of the problem, can be resolved through hack. <style type= "Text/css" >.left {float:left; height:30px; width:100px; Background-color: #ccc;}. Right {margin-left:110px; Background-color: #369;} </style>(2) float + margin + fixAdvantages, compatibility is good, shortcomings, a little more structure. <div class= "Parent" ><div class= "left" ><p>left</p></div><div class= "Right-fix" ><div class= "right" ><p>right</p><p>right</p></div></div></div ><style type= "Text/css" >.left {float:left; width:100px; Background-color: #999;p osition:relative;/* raise the level, Otherwise, the element cannot be selected because fix is in the back */}.right-fix {float:right;width:100%; Background-color: #ddd; margin-left:-100px;}. Right {margin-left:110px; Background-color: #369;} </style>(3) float + overflowDisadvantage IE6, no <div class= "parent" ><div class= "left" ><p>left</p></div><div class= "right "><p>right</p><p>right</p></div></div><style type=" Text/css ">.left {float:left; width:100px; Margin-right:20px;background-color: #999;}. Right {overflow:hidden;/* triggers BFC,BFC mode with external isolation */background-color: #ddd;} </style>(4) Table<div class= "Parent" ><div class= "left" ><p>left</p></div><div class= "right" > <p>right</p><p>right</p></div></div><style type= "Text/css" >.parent { display:table;width:100%;table-layout:fixed;/* two benefits (1) Speed up table rendering, and make layout a priority. */background-color: #999;}. Left,. Right {display:table-cell;background-color: #eee;}. Left {width:100px;background-color: #369;p adding-right:20px;} </style>(5) Flexcompatibility issues. Slightly less performance, small-scale layout. <div class= "Parent" ><div class= "left" ><p>left</p></div><div class= "right" > <p>right</p><p>right</p></div></div><style type= "Text/css" >.parent { Display:flex;}. Left {background-color: #369; left:100px;margin-right:20px;}. Right {flex:1;/*1 1 0; The remaining width is left */background-color: #eee;} </style>multi-column fixed-width, one-row adaptive<div class= "Parent" ><div class= "left" ><p>left</p></div><div class= "center" > <p>center</p></div><div class= "right" ><p>right</p><p>right</p> </div></div>------------1---------------<style type= "Text/css" >.parent {Display:flex;}. Left,. Center {background-color: #369; left:100px;margin-right:20px;}. Right {flex:1;/*1 1 0; The remaining width is left */background-color: #eee;} </style>------------2---------------<style type= "Text/css" >.left,. Center {background-color: #369; float:left;width:100px;margin-right:20px;}. Right {overflow:hidden;background-color: #eee;} </style>multi-column layouts<div class= "Parent" ><div class= "left" ><p>left</p></div><div class= "right" > <p>right</p><p>right</p></div></div>left and right adaptive(1) float + overflow<style type= "Text/css" >.left {background-color: #369; float:left;margin-right:20px;}. Right {overflow:hidden;background-color: #eee;} </style>(2) Table<style type= "Text/css" >.parent {display:table;width:100%;table-layout:fixed;}. Left,. Right {Display:table-cell;}. Left {width:100px;padding-right:20px;background-color: #369;}. Right {background-color: #eee;} </style>(3) Flex<style type= "Text/css" >.parent {Display:flex;}. Left {width:200px;margin-right:20px;}. Right {flex:1;background-color: #369;} </style>

　　

Resolving multi-column layouts