效果圖：
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding: 0px; } li{ list-style: none; } #div1{ width:950px; height: auto; margin: 20px auto; border: 1px solid red; } ul{ border: 1px solid blue; width: 250px; float:left; } </style> </head> <body> <div id="div1"> <ul> <li><img src="img/1.jpg" width="150px" height="150px"></li> <li><img src="img/2.jpg" width="150px" height="150px"></li> <li><img src="img/3.jpg" width="150px" height="150px"></li> </ul> <ul> <li><img src="img/4.jpg" width="150px" height="150px"></li> <li><img src="img/5.jpg" width="150px" height="150px"></li> <li><img src="img/6.jpg" width="150px" height="150px"></li> </ul> <ul> <li><img src="img/7.jpg" width="150px" height="150px"></li> <li><img src="img/8.jpg" width="150px" height="150px"></li> <li><img src="img/9.jpg" width="150px" height="150px"></li> </ul> </div> </body> </html>