Home > Article > Web Front-end > How to achieve multiple divs evenly arranged horizontally and attached to the wall at both ends_html/css_WEB-ITnose
How to achieve multiple divs to be evenly arranged horizontally and attached to the wall at both ends:
In web page layout, there is often such a requirement, that is, several divs are evenly arranged horizontally in a box , and the outside of the divs at both ends are close to the inner walls of the box, as shown in the figure below:
Let’s look at a code example:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> .parent{ width:480px; height:100px; border:1px solid red; overflow:hidden; } .parent div{ width:100px; height:100px; background-color:green; margin-left:20px; float:left; } </style> </head> <body> <div class="parent"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> Although the above code is evenly distributed, Due to the outer margin, the left side cannot be attached to the inner wall of the parent element, which cannot satisfy our effect. The code is modified as follows:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> .parent{ width:460px; height:100px; border:1px solid red; overflow:hidden; } .wrap{ width:480px; height:100px; overflow:hidden } .parent .wrap div{ width:100px; height:100px; background-color:green; margin-right:20px; float:right; } </style> </head> <body> <div class="parent"> <div class="wrap"> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html> The above code achieves what we want. Effect. The method is to nest another div outside the horizontally arranged div, and set the width of this div to 480px, so that the horizontally arranged div will not cause line breaks. Set the width of the outermost div to 460, and set the overflow attribute value to hidden, so that the margin-right area on the right can be hidden, thus achieving the effect we want.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/501.html