1 : inline-block布局;
2:table布局;
3:justify的末行不对齐
4：两个图标之间有空格（换行）
5:背景中的图片的 路径的 全部斜杠都为 /,不是 命令行下的这种
<!doctype html> <html> <head> <meta charset="utf-8"> <title>xx</title> </head> <body> <style> .i_b { display:inline-block; } .px40 { width:40px; } .tb { display:table; } .tr { display : table-row; } .td { display:table-cell; } .justify{ text-align:justify; } .justify_fix { display: inline-block; width: 100%; height: 0; overflow: hidden; } </style> <div> inline-block布局么么哒 /* IE 7,6不支持; 用display:inline; *zoom:1模拟 */ <div class="i_b px40"> 111 111 111 </div> <div class="i_b"> 111 </div> <div class="i_b px40"> 111 111 111 111 </div> <div class="i_b"> 111 </div> table布局么么哒 <div class="tb"> <div class="tr"> <div class="td"> display:table-cell; <br> <br> display:table-cell; </div> <div class="td"> display:table-cell; <br> <br> display:table-cell; </div> <div class="td"> display:table-cell; <br> <br> display:table-cell; </div> <div class="td"> display:table-cell; <br> <br> display:table-cell; </div> </div> <div class="tr"> <div class="td"> display:table-cell; <br> <br> display:table-cell; </div> <div class="td"> display:table-cell; <br> <br> display:table-cell; </div> <div class="td"> display:table-cell; <br> <br> display:table-cell; </div> <div class="td"> display:table-cell; <br> <br> display:table-cell; </div> </div> </div> <div class="justify"> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> <div class="justify_fix"></div> </div> <div> 两个图标之间有空格么么哒; <img src="android_page_selected.png" /> <img src="android_page_selected.png" /> </div> <div> 两个图标之间木有空格么么哒; <img src="android_page_selected.png" /><img src="android_page_selected.png" /> </div> </div> </body> </html>