我让 Img 悬停是为了好玩。但现在我的 div 中有一些文本。我使用了代码:
display: table-cell;
vertical-align: middle;
使文本在我的 div 中居中。我也有这段代码:
.vertical-smallborder{
position: relative;
width: 217px;
height: 350px;
border: 5px solid white;
outline: 1px solid #c8c8c8;
float:left;
display: table;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
overflow: hidden;
}
我得到了 display: table
那边的文本。如果我删除它,文本将不会在 div 中居中。
现在我遇到了溢出问题:隐藏。在 FireFox 和 IE 中,如果存在 display: table
,overflow: hidden 将不再起作用。
Google Chrome 和 Safari 都同时支持 display: table
和 Overflow:hidden
。
注意:必须是纯CSS。所以我不能使用任何 javascript。
谢谢
最佳答案
对于 Firefox - 概念验证
我创建了一个演示如下:
<div class="image-clipper">
<img src="http://placekitten.com/400/500" style="margin: -150px 0 0 -100px;" />
<div class="text-panel">
<div class="text-cell">
<h1>Overhemd<br/>24,95</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
并使用了以下 CSS:
.image-clipper {
width: 250px;
height: 300px;
border: 5px solid red;
overflow: hidden;
position: relative;
}
.image-clipper .text-panel {
position: absolute;
top: 0;
left: 0;
display: table;
height: 100%;
}
.image-clipper .text-cell {
display: table-cell;
vertical-align: middle;
padding: 20px; /* works okay */
background-color: rgba(255,255,255,0.5); /* applied to entire cell */
}
而且我能够在父元素中裁剪图像,并根据需要定位表格/表格单元格。
查看演示:http://jsfiddle.net/audetwebdesign/JpMXP/
后记
我没有时间深入查看您的样式表或调查表格/表格单元格如何与 overflow: hidden
交互的全部细节。但是,这种方法似乎有效并且相对容易理解。
关于html - 隐藏显示表和溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16823919/