How to implement horizontal and even arrangement of multiple Divs, and the numbers of the two ends are attached to the wall, the two ends of the div

How to implement horizontal and even arrangement of multiple Divs, and the numbers of the two ends are attached to the wall, the two ends of the div

How to implement horizontal and even arrangement of multiple divs and stick them to the two ends:
Suggestion: writing code as much as possible can effectively improve learning efficiency and depth.
In the web page layout, there is often such a requirement that several divs are horizontally arranged in a box, and the sides of the divs are closely bound to the inner wall of the box, as shown in:
Let's take a look at the code example:

<! DOCTYPE html> 
Although the above Code is evenly distributed, it cannot be attached to the inner wall of the parent element due to the margin on the left, which does not meet our requirements. The code is modified as follows:
<! DOCTYPE html> 
The above code achieves the desired effect. The method is to nest a div in the outer layer of the horizontally arranged div and set the width of the div to PX. This will not cause a line break for the horizontally arranged div. Set the div of the outermost layer to 460 in width and set the overflow attribute value to hidden. In this way, you can hide the margin-right area on the right to achieve the desired effect.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 4583.
For more information, see: http://www.softwhy.com/divcss/