6 ideas for a single-row fixed-width single-row adaptive layout in CSS two column layouts

Previous words

Speaking of adaptive layout, single-row fixed-width single-row adaptive layout is the most basic form of layout. This article explains how to skillfully implement layouts from the six ideas of float, inline-block, table, Absolute, Flex, and Grid

Float

" idea one"float

The most common way to talk about two-column layouts is to use float. The disadvantage of float floating layout is that it will result in text wrapping and so on, and need to clear the float in time. Jagged effect may occur if the height of each floating element is different

"1" float + margin

Use float for a fixed-width column, and an adaptive column to use the calculated margin

<style>p{margin:0;}. Parent{overflow:hidden;zoom:1;}. left{float:left;width:100px;}    . right{margin-left:120px;} </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>

[Disadvantage 1] ie6-3 pixel bug in the browser, the first line in the right side of the text will be offset to the right 3px. The workaround is to set margin-right on the left element: -100px

[Disadvantage 2] When an element in the right container clears the float, it causes the element not to walk along with the left floating element, resulting in a text sinking phenomenon

"2" float + margin + (fix)

(fix) represents an increase in structure, in order to solve the two drawbacks of the above method, it can be implemented by adding structure. An adaptive column adds a layer of structure to the outside side. Rightwrap and set float. to achieve the adaptive effect, the. Rightwrap width must be set to 100%. If not set, the element width after float will be stretched by the content. At the same time, the calculation of the properties of the box model, set the calculated negative margin value, so that two columns of elements in the same row display. The spacing between the two columns is determined by the margin value of. Right. Since the elements on the right are stacked on top of the left element, you need to use relative to raise the hierarchy

<style>p{margin:0;}. Parent{overflow:hidden;zoom:1;}. left{position:relative;float:left;width:100px;}    . Rightwrap{float:left;width:100%;margin-left: -100px;}. right{margin-left:120px;} </style>

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

"3" float + margin + Calc

In addition to the method of increasing the structure, you can also use the Calc ()

Note ie8-, android4.3-, ios5.1-not supported, android4.4+ only supports add and subtract operations

<style>p{margin:0;}. Parent{overflow:hidden;zoom:1;}. left{float:left;width:100px;margin-right:20px;}    . Right{float:left;width:calc (100%-120px);} </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>

"4" Float + overflow

You can also use the overflow property to trigger BFC to prevent the text wrapping effect from floating. Because using overflow does not change the element's Width property, you do not need to reset the width. 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;width:100px;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>

Inline-block

"Thinking Two" inline-block

The main disadvantage of the Inline-block inline block layout is that you need to set the vertical alignment vertical-align, and you need to deal with the gap problem of line break parsing into spaces. Ie7-Browser does not support setting the Inline-block property to block-level elements, the compatible code is display:inline;zoom:1;

"1" Inline-block + margin + Calc

In general, to resolve gaps between inline-block elements, set Font-size to 0 in the parent, and then set Font-size to the default size in the child elements

Note ie8-, android4.3-, ios5.1-not supported, android4.4+ only supports add and subtract operations

<style>p{margin:0;}. parent{font-size:0;}. left{display:inline-block;vertical-align:top;width:100px;margin-right:20px;font-size:16px;}. Right{display:inline-block;vertical-align:top;width:calc (100%-120px); font-size:16px;} </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>

"2" Inline-block + margin + (fix)

<style>p{margin:0;}. parent{font-size:0;}. left{position:relative;display:inline-block;vertical-align:top;width:100px;font-size:16px;}. Rightwrap{display:inline-block;vertical-align:top;width:100%;margin-left: -100px;font-size:16px;}. right{margin-left:120px;} </style>

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

Table

"Thinking three" table

The disadvantage of using the table layout is that the content is stretched to the width after the element is set to table, so you need to set width:100%. To be compatible with ie7-browsers, you need to change to <table> structure. Because the Table-cell element cannot set the margin, if you need to set the spacing between elements, you need to increase the structure

<style>p{margin:0;}. parent{display:table;width:100%;table-layout:fixed;}. Left,.rightwrap{display:table-cell;}. left{width:100px;}. right{margin-left:20px;} </style>

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

Absolute

"Idea four" absolute

The disadvantage of the absolute layout is that because the parent element needs to be set to relative, and the child element is set to absolute, the height of the parent element is not stretched by a sub-element and needs to be set separately.

Note Ie6-does not support the relative offset property setting at the same time

<style>p{margin:0;}. parent{position:relative;width:100%;height:40px;}. left{position:absolute;left:0;width:100px;}. right{position:absolute;left:120px;right:0;} </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>

Flex

"Idea Five" flex

Flex box models are a very powerful way to lay out. But because of its high performance consumption, it is suitable for the layout of local small area

Note ie9-Browser does not support

<style>p{margin:0;}. Parent{display:flex;}. left{width:100px;margin-right:20px;}. Right{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 six": Using a Grid layout grid implementation

Note ie10-Browser does not support

<style>p{margin:0;}. parent{display:grid;grid-template-columns:100px 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/5452865.html

6 ideas for a single-row fixed-width single-row adaptive layout in CSS two column layouts