实际应用中十分常见的布局效果,尤其是在产品展示类型网站。
下面就通过flex弹性布局来实现此功能。
代码实例如下:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!doctype html> < html > < head > < meta charset = "utf-8" > < title >蚂蚁部落</ title > < style > * { margin: 0; padding: 0; } ul { list-style: none; display: flex; flex-wrap: wrap; justify-content:space-between; width: 550px; margin:0 auto; background-color:#B4D3F7; } li { width: 120px; height: 120px; background: #F7E8B4; margin:10px 0; } </ style > </ head > < body > < ul > < li ></ li > < li ></ li > < li ></ li > < li ></ li > < li ></ li > < li ></ li > < li ></ li > < li ></ li > </ ul > </ body > </ html > |
代码实现产品贴壁均匀排列的效果,代码比较简单具体参阅相关阅读。