《CSS世界》读书笔记

常用清楚浮动方式

/* 清楚浮动 */
.clearfix{
    *zoom : 1; /*For IE 6/7*/
}
.clearfix:after {
    content: '';
    display: table;/*block也行*/
    clear: both
}

需求： 页面某模块的文字内容是动态的，希望文字少的时候居中显示，超过一行居左显示

        <div class="container">
        　　<div class="box">
        　　    <p id="conMore" class="content">文字内容-新增文字-新增文字-新增文字</p>
        　　</div>
        </div>
        <div style="height: 10px;"></div>
        <div class="container">
        　　<div class="box">
        　　    <p id="conMore" class="content">文字内容</p>
        　　</div>
        </div>
        <style>
            .container{
                background-color: #f00;
                color: #fff;
                width: 240px
            }
            .box {
                text-align: center;
            }
            .content {
                display: inline-block;
                text-align: left;
            }
        </style>