Complete method of arranging multiple boxes in one row Responsive web layout_html/css_WEB-ITnose

If you want to put multiple block-level elements on the same line, the first thing students think of is floating, but is this the only one? The answer is no. Here, Teacher Xiaoqiang summarizes 5 layout methods, hoping to be helpful to everyone.

The first method: Floating method This method is the simplest, and it is also a skill that we must master when learning CSS, just float the li.

The code is as follows:

Document %;height: 200px; list-style: none;} li{float: left;width: 200px;height: 200px; background:pink; margin-left: 10px;}

; :

Second method: Positioning method

This method is also possible, but is less used.

The third method: Convert to inline block method We know that our CSS display mode has inline display mode (inline) and block-level display mode ( block), and inline-block display mode (inline-block) We know that in web page layout, in many places, we can use standard flow without floating or positioning. Because inline-block belongs to the standard stream, it is more stable than floating and positioning.

For example, Taobao:

The code is as follows:

/css"> ul{width:80%;height: 200px; list-style: none; font-size: 0; /* Add font-size: 0 to the parent box to remove the default white space */} li{width: 200px;height: 200px; background:pink; margin-left: 10px;

display: inline-block;/* Convert to inline block*/ font-size: 12px;/ * Change the font size back*/} Side 🎜>

The effect is as follows:

The fourth method: table-cell

We know that display: table is a method of converting into table elements and display:table-cell is converted into cell elements

Because after using table-cell, margin cannot be used, so border-spacing is used here */ border-collapse:separate;} li{width: 200px;height: 200px; background:pink; display: table-cell;} >

The effect is as shown in the figure:

This method is not suitable for ie6 and 7, but considering ie6.7 it is already very It's much less, we can use it with confidence.

The fifth method: CSS3 layout display:flex This is a new attribute based on the CSS3 box model. It is very convenient to write with it, and The width of each li can be adapted to the parent box. It will be much more convenient to use it to make responsive web pages in the future.

/ } li{height: 200px; background:pink; flex:1; /* The tie is divided into three parts, each li takes one point*/ li{height: 200px; background:pink; 🎜> lt;li>Left

;/html>

The effect is as shown below:

Note: Because CSS3 definitely has browser compatibility issues, don’t forget to add the prefix . Here, Teacher Xiaoqiang wants everyone to see the code more clearly, so there is no prefix. For example: display:-webkit-flex; -webikt-flex:1;

Well, it turns out that there are so many ways to arrange boxes, especially the last three methods, which will be used more and more. Because future websites will make great strides towards HTML5 and CSS3.

Xiaoqiang Linglingyi shares it with everyone.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Complete method of arranging multiple boxes in one row Responsive web layout_html/css_WEB-ITnose

The first method: Floating method