CSS显示:table-cell,set height和overflow:hidden,不起作用?

时间:2016-08-04 03:59:02

标签: html css clip

我想剪辑一个元素,如果它的子元素内容太大,但它在display:table-cell元素中不起作用。以下是JsFiddle的一个例子:

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;
&#13;
&#13;

任何人请告诉我哪里错了?谢谢!

2 个答案:

答案 0 :(得分:2)

为了使它工作,我们必须对表和位置使用position:relative:表单元格项的绝对值。同样在你的代码中,我已经删除了容器的高度:100%这是没用的。这是预览和fiddle

&#13;
&#13;
.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;
&#13;
&#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;
}

fiddle here