I. Summary of CSS layout for horizontal columns, css layout for horizontal Columns

I. Summary of CSS layout for horizontal columns, css layout for horizontal Columns

I. Use float to implement Horizontal Column Layout

As shown below: Both DIV1 and DIV2 can choose to float 50% left or right to display the same row.

Div1

Div2

 

The css style of the following image is as follows:

Analysis:

1. The left and right margins of the first and last images in the first line are 10 PX, and the left and right margins of the middle images are 5 PX. The layout is as follows:

<section class="active_div1"> <div> </div> <div> </div> <div> </div> </section>

.active_div1 div { float: left; width: 33.33%; box-sizing: border-box;} .active_div1 div:nth-child(1) { padding-left: 10px;} .active_div1 div:nth-child(3) { padding-right: 10px;} .active_div1 div:nth-child(2) { padding: 0 5px;}

2. The second row only has the 5px margin of the middle image. The layout is as follows:

<section class="active_div2"> <div> </div> <div> </div> <div> </div> </section>

.active_div2 div { width: 33.33%; float: left; box-sizing: border-box;} .active_div2 div:nth-child(2) { padding: 0px 5px;}

 

NOTE: If no other style exists after using box-sizing: border-box, all the blocks will be pasted together without any spacing in the middle. This is also a classic layout.

Ii. Use display: inline-block

Display: Most of the inline-blocks are used for row block conversion. We do not recommend using this attribute for Row/column layout. Because inline-block cannot completely replace float

The layout in the red box uses the display: inline-block most classic layout.

<Header id = "consume_h"> <span> NO refund for consumption expired </span> <span> NO reservation </span>

.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. The definition of pseudo classes is to use special notes to record them. We will not repeat them here.

There is also a classic layout:

This layout is generally:

<Div>  <p> test not to be shot </p> </div>

Position: absolute is usually used for left-side fixation and right-side adaptation.

Note: height of Fixed-width columns> adaptive width columns?

Iii. use flexible box to implement Fluid layout in the true sense

I have not actually experienced this method in actual operations. Here we will record it first ~