A CSS method for Heng Lie typesetting layout

first, the method of using float to realize Heng Lie layout

As shown below: Both P1 and P2 can choose to float 50% to the left or right to display on the same line

P1

P2

Analysis:

1, the first line of the first picture and the last picture of the left and right margin is 10px, the middle picture of the left and right margin is 5px. The layout is as follows:

<section class= "Active_p1" > <p> </p> <p > </p> <p> </p> </section>

. ACTIVE_P1 p { float:left; width:33.33%; Box-sizing:border-box;} . Active_p1 P:nth-child (1) { padding-left:10px;}. Active_p1 P:nth-child (3) { padding-right:10px;}. active_ P1 P:nth-child (2) { padding:0 5px;}

2, the second line only the middle picture the most margin is 5px; the layout is as follows:

<section class= "ACTIVE_P2" > <p> </p> <p> </p> <p> </p> </section>

. ACTIVE_P2 p { width:33.33%; Float:left; Box-sizing:border-box;} . ACTIVE_P2 P:nth-child (2) { padding:0px 5px;}

Note: If there are no other styles after using Box-sizing:border-box, all blocks will be pasted together, without any spacing between them.

Second, the use of Display:inline-block

Display:inline-block most transformations for a row block, this property is not recommended for column layout. Because Inline-block can not replace float completely.

The layout in the red box is the most classic layout using Display:inline-block.

. Consume_h span { display:inline-block;}. Consume_h span:before { content: "\f120"; Display:inline-block; margin-right:5px; margin-left:10px; font-family: "Ionicons"; Speak:none; Font-style:normal; Font-weight:normal; Font-variant:normal; Text-transform:none; Text-rendering:auto; line-height:1; -webkit-font-smoothing:antialiased;}

Pseudo-classes are used here, and the definition and use of pseudo-classes are not introduced here.

There is also a classic layout:

This layout is generally:

<p>                        <p> Test do not    shoot            </p> </p>

The use of positioning Position:absolute is often used for left fixed, right-adaptive conditions.

1. Relative positioning of P

2. Absolute positioning of img

3. P for relative positioning

Third, using flexible box to achieve a true sense of fluid layout