基础知识点

时间：2014-10-11 18:00:05 阅读：237 评论：0 收藏：0 [点我收藏+]

标签：android style blog color ar sp div log html

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>

基础知识点

标签：android style blog color ar sp div log html

原文地址：http://www.cnblogs.com/diligenceday/p/4018982.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行