设置了table-cell 属性后，用百分比来设置宽度为什么会出现问题
.right-content-title span{
display: table-cell;
width: 3.5%;
text-align: center;
height: 42px;
vertical-align: middle;
}
加了这个display: table-cell属性后，width的意义是什么呢？
展开
收起
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>
结论就是table-cell里的width:3.5%，故意设置很小，目的是让table-cell占总容器100%宽2019-07-17 19:35:23赞同 展开评论 打赏
相关问答
问答排行榜
最热
最新
推荐问答
