Question

这个问题已经在stackoverflow上被问了几次，但是我想知道是否有人 - 也许你 - 没有解决我的问题的独特方法。

我目前有一个父div，它的高度和宽度各不相同，其内容也有不同的宽度和高度。为了垂直对齐子div，我将它的父级设为display: table;并将其设为display: table-cell;并嵌套了另一个div，如下所示：

<!-- css styling  -->
<style type="text/css">
.div-table {
display: table;
position: absolute;
height: 100%;
width: 100%;
 }

.div-cell {
display: table-cell;
padding: 10px;
vertical-align: middle;
 }

.div-alignedcontents {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>

<!-- html  -->
<div class="div-table">
    <div class="div-cell">
        <div class="div-alignedcontents">
            <p>Some content that has a varying height and width!</p>
        </div>
    </div>
</div>

问题是overflow:hidden属性似乎不适用于表格，table-layout: fixed属性不会限制垂直比例/高度。一个解决方案是将所有上面的html嵌套在另一个div和样式div中overflow:hidden，但是我想我可能会首先选择你的大脑。

提前感谢您的帮助。

Answer 1

一种解决方案可能是为padding定义.div-cell百分比，并从div-table的宽度中减去相同的填充。像这样：

.div-table {
    width: 95%
    height: 95%
}
.div-cell {
    padding: 2.5%
}

Fiddle

如何隐藏表上的溢出

1 个答案: