Multiple divs are distributed at the same interval in the same row, and multiple divs are separated.

Multiple divs are distributed at the same interval in the same row, and multiple divs are separated.

Multiple divs are distributed at the same interval in the same row:
This layout effect is frequently used, that is, multiple divs are distributed in one row, and the gap between divs is the same. It is often used for product display, the following describes how to implement the layout. The code example is as follows:

<! DOCTYPE html> 
The above Code meets our requirements. The li element can be evenly distributed in the div, and the interval between them is the same.
The principle is very simple, that is, let li float left, then set the margin-right attribute value, that is, the interval between li elements, and the div element has the overflow: hidden attribute, in this way, the part beyond the margin-right is hidden, so that there is no blank on the right side.
Original address: http://www.51texiao.cn/HTML5jiaocheng/2015/0521/2134.html