文章出處
文章列表
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>
文章列表
全站熱搜
留言列表
