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

最新推荐文章于 2023-07-17 12:05:26 发布

马丁泛泛

最新推荐文章于 2023-07-17 12:05:26 发布

阅读量6.5k

点赞数 2

本文链接：https://blog.csdn.net/ikillyou44/article/details/78406021

版权

<!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>

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

马丁泛泛

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
设置了table-cell 属性后，用百分比来设置宽度为什么会出现问题

test p { margin:0; } .right-content-title111 {border:1px solid black; width:400px; margin-top:15px;} .right-content-title111 span{ border : 1px solid red; display: tab
复制链接

扫一扫