4 ideas for CSS two-column adaptive layouts

Previous words

The two-column layout of the 6 ideas for a single-column, fixed-width single-row adaptive layout in the CSS two column layout has been described earlier, while the two-row adaptive layout refers to the layout of a column that is stretched by content and the remaining width is covered by another column. This article introduces 4 ideas for two-column adaptive layouts from float, table, Flex, and grid

float

" idea one"float

In a single-row, fixed-width single-row adaptive two-column layout, the layout effect is often achieved with float and negative margin mates. However, because the margin value can only be a fixed value, it is no longer applicable in layouts where both columns are adaptive . The combination of float and overflow can achieve two-column adaptive effects. Use the overflow property to trigger BFC to prevent the text wrapping effect from floating. Because setting Overflow:hidden does not trigger the Haslayout property of the Ie6-browser, you need to set Zoom:1 to be compatible with ie6-browser

<style>p{margin:0;}. Parent{overflow:hidden;zoom:1;}. left{float:left;margin-right:20px;}    . Right{overflow:hidden;zoom:1;} </style>

<div class= "Parent" style= "" >    <div class= "left" style= "" >        <p>left</p>    </div >    <div class= "right"  style= "" ">        <p>right</p>        <p>right</p>    </div>        </div>

Table

"Thinking two" table

If the table element does not set table-layout:fixed, the width is stretched by the content. Nest a layer of div in the outer layer of a TABLE-CELL element and set a small enough width such as width:0.1%

<style>p{margin:0;}. parent{display:table;width:100%;}. leftwrap{display:table-cell;width:0.1%;}. left{margin-right:20px;}    . Right{display:table-cell;} </style>

<div class= "Parent" style= "" >    <div class= "leftwrap" style= "" >        <div class= "left" style= "" >            <p>left</p>        </div>            </div>    <div class= "right"  style= ">        <p>right</p>        <p>right</p>    </div>        </div>

Flex

"Idea three" flex

Flex box models are a very powerful way to lay out. Basically, the general layout method can be implemented

Note Ie9-not supported

<style>p{margin:0;}. Parent{display:flex;}  . right{margin-left:20px; flex:1;} </style>

<div class= "Parent" style= "" >    <div class= "left" style= "" >        <p>left</p>    </div >            <div class= "right"  style= "" ">        <p>right</p>        <p>right</p>    </div>        </div>

Grid

"Idea four" grid

Note ie10-Browser does not support

<style>p{margin:0;}. Parent{display:grid;grid-template-columns:auto 1fr;grid-gap:20px}  </style>

<div class= "Parent" style= "" >    <div class= "left" style= "" >        <p>left</p>    </div >            <div class= "right"  style= "" ">        <p>right</p>        <p>right</p>    </div>        </div>

Reprint:http://www.cnblogs.com/xiaohuochai/p/5454232.html

4 ideas for CSS two-column adaptive layouts