设置了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 属性后，用百分比来设置宽度为什么会出现问题

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

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

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

如何处理 CSS calc() 函数中的单位不一致问题？

js阻止冒泡问题？