开发者社区> 问答> 正文

设置了table-cell 属性后,用百分比来设置宽度为什么会出现问题

.right-content-title span{

            display: table-cell;
            width: 3.5%;
            text-align: center;
            height: 42px;
            vertical-align: middle;
            

}
加了这个display: table-cell属性后,width的意义是什么呢?

展开
收起
杨冬芳 2016-06-13 11:08:39 3502 0
1 条回答
写回答
取消 提交回答
  • IT从业
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style>
        p { margin:0; }
        .right-content-title111 {border:1px solid black; width:400px; margin-top:15px;}
        .right-content-title111 span{
            border : 1px solid red;
            display: table-cell;
            width: 70%;
            text-align: center;
            height: 22px;
            vertical-align: middle;
        }
        .right-content-title222 {border:1px solid black; width:400px; margin-top:1px;}
        .right-content-title222 span{
            border : 1px solid red;
            display: table-cell;
            width: 40%;
            text-align: center;
            height: 22px;
            vertical-align: middle;
        }
        .right-content-title333 {border:1px solid black; width:520px; margin-top:1px;}
        .right-content-title333 span{
            border : 1px solid red;
            display: table-cell;
            width: 10%;
            text-align: center;
            height: 22px;
            vertical-align: middle;
        }
        </style>
    </head>
    <body>
        <p class="right-content-title111"><span>短</span></p>
        <p class="right-content-title222"><span>短</span></p>
        <p class="right-content-title333"><span>短</span></p>
        <p class="right-content-title111"><span>中中</span></p>
        <p class="right-content-title222"><span>中中</span></p>
        <p class="right-content-title333"><span>中中</span></p>
        <p class="right-content-title111"><span>长长长</span></p>
        <p class="right-content-title222"><span>长长长</span></p>
        <p class="right-content-title333"><span>长长长</span></p>
    </body>
    </html>

    screenshot
    screenshot
    结论就是table-cell里的width:3.5%,故意设置很小,目的是让table-cell占总容器100%宽

    2019-07-17 19:35:23
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载