首页 > 代码库 > 基础知识点
基础知识点
1 : inline-block布局;
2:table布局;
3:justify的末行不对齐
4：两个图标之间有空格（换行）
<!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>
基础知识点
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。