One column, multiple column widths, and one column of adaptive layouts for multiple column layouts

Source: Internet
Author: User

Proposition:

<Divclass= "Parent">     <Divclass= "Left">          <P>Left</P>    </Div>    <Divclass= "Right">          <P>Right</P>          <P>Right</P>    </Div></Div>

Problem one: A fixed width and a list of adaptive

Scenario 1:

. left{   Float:left;   width:100 px;}. right{   margin-left:120 px;}

Disadvantage: The 1.ie6 will produce a 3px bug, that is, the text in right will be indented to 3px. Solution:. left{margin-right:-100px;}

2. If you add a clear float on right, it will fall to the next line.

Improvement Program :

//html
<Divclass= "Parent"> <Divclass= "Left"> <P>Left</P> </Div> <Divclass= "Right-fix"> <Divclass= "Right"> <P>Right</P> <P>Right</P> </Div> </Div></Div>
Style
. left{   Float:left;   width:100 px;
position:relative; Raise left Level}
. right-fix{
Float:right;
width:100%;
margin-left:100px;
}
. right{margin-left:120 px;}

Pros: Good compatibility

Cons: Complex structure

Scenario 2:

. left{   Float:left;   width:100 px;
margin-right:20px}.right{ Overflow:hidden; Trigger BFC Mode}

Bfc:block formating Contact Quick format. Isolated from outside format

Cons: IE6 not supported

Scenario 3:

. parent{   display:table;               width:100%;           Table default width is subject to content, and the sum of the width of each column is the total width of table
table-layout:fixed; Improve the rendering speed, realize the layout priority}.left,.right{ Display:table-cell; Set to cell can not be set margin}.left{ width:100 px;
padding-right:20px;}

Scenario 4:

. parent{    Display:flex;}. left{    width:100 px;    margin-right:20px;}. right{    flex:1;                 Equivalent to flex:1 1 0;   The rest of the space is given right}

Cons: 1. There are compatibility issues in the low-version browser;

2. Because flex adjusts the width according to the content, the possibility can be problematic

Note: Try to use flex only in less complex places

Problem one: Multi-column fixed width and one-column adaptive

In general, you simply write a fixed-width column in the same format, using the same style

Summary: Pay attention to compatibility, and grasp the characteristics of elements.

One column, multiple column widths, and one column of adaptive layouts for multiple column layouts

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.