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

.right-content-title span{

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

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

阅读 15.9k

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

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

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

怎么把一个矩形div变成一个直角三角形？

怎么去掉聚焦文字处的光标竖线？

Web 上的室内导航效果是如何实现的呢？

浏览器可以直接解析scss文件了吗？

Flask中static文件夹下的本地图片无法在HTML页面加载怎么办？

图片沿着圆环的转动有什么方法吗？