Implement two-column layouts with Table+table-cell (one column is fixed width, one column is adaptive, and table is automatically ascending by two columns)
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Document</title>6 <styletype= "Text/css">7 . Parent{8 Background-color:Grey;9 width:500px;Ten Height:300px; One padding:10px; A box-sizing:Border-box; - - Display:Table; the Table-layout:fixed;//speed up the rendering of table to realize layout first - } - . Left{ - width:100px; + Display:Table-cell; - Background-color:Skyblue; + Border-right:10px Solid Transparent; A Background-clip:padding-box;//Setting the display position of the background at } - . Right{ - Display:Table-cell; - Background-color:Greenyellow; - } - </style> in </Head> - <Body> to <Divclass= "Parent"> + <Divclass= "Left"></Div> - <Divclass= "Right"></Div> the </Div> * </Body> $ </HTML>
Two-column layout (one column fixed width, one column adaptive)