我想剪辑一个元素,如果它的子元素内容太大,但它在display:table-cell
元素中不起作用。以下是JsFiddle的一个例子:
.table{
display: table;
table-layout: fixed;
width: 100%;
height:200px;
}
.cell{
display: table-cell;
vertical-align: top;
position: relative;
height:200px;
overflow:hidden;
}
.container{
height:100%;
background-color:red;
}
.container img{
display:block;
}

<div class="table">
<div class="cell">
<div class="container">
<img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
<img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
<img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
</div>
</div>
&#13;
任何人请告诉我哪里错了?谢谢!
答案 0 :(得分:2)
为了使它工作,我们必须对表和位置使用position:relative:表单元格项的绝对值。同样在你的代码中,我已经删除了容器的高度:100%这是没用的。这是预览和fiddle。
.table{
display: table;
table-layout: fixed;
width: 100%;
height:200px;
position: relative;
}
.cell{
display: table-cell;
vertical-align: top;
position: absolute;
height:200px;
width: 100%;
overflow-y:scroll;
overflow-x: hidden;
}
.container{
background-color:red;
}
.container img{
display:block;
}
&#13;
<div class="table">
<div class="cell">
<div class="container">
<img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
<img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
<img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
</div>
</div>
&#13;
答案 1 :(得分:-1)
更改您的css显示类型。
.table{
display:block;
width: 100%;
height:200px;
}
.cell{
display:block;
vertical-align: top;
position: relative;
height:200px;
overflow:hidden;
}
.container{
height:100%;
background-color:red;
}
.container img{
display:block;
}