我有一个div相对放置,并且里面有另一个div绝对放置。 我给了主要的div溢出:隐藏的和border-radios ...但是,里面的div的边缘没有覆盖在主要的div内部,即溢出不起作用。

实时预览和完整代码在这里: http : //jsfiddle.net/sYv78

<div class="gridElement">
    <img alt="image" src=
    "https://pbs.twimg.com/profile_images/441318694942031872/I2cc6yMB.jpeg">

    <div class="animate">
        <p>Short Description</p>
    </div><a href=""></a>
</div>

.frames img, .frame {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
/*Grids System*/
 .grids {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}
.grids.columns2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}
.grids.columns4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}
.grids .gridElement {
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}
.grids .gridElement:last-child {
    margin-bottom: 0;
}
.grids .gridElement img {
    min-width: 100%;
}
.grids .gridElement .animate {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding-top: 20%;
    text-align: center;
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    transition: all .4s linear;
}
.grids .gridElement:hover > .animate {
    filter: alpha(opacity=1);
    opacity: 1;
}
.grids .gridElement .animate span.background {
    background-color: #3F8AE4;
    filter: alpha(opacity=70);
    opacity: 0.70;
}
.grids .gridElement .animate span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding-top: 20%;
    font-size: 2em;
}
.grids .gridElement a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.grids .gridElement a * {
    cursor: pointer;
}
.grids .gridElement .animate p {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 15px 15px 0;
}

===============>>#1 票数:0

关于overflow: hidden;的奇怪之处overflow: hidden; 它需要固定的边界才能工作。 通过为.grids .gridElement类指定一个固定的高度(例如500px ,溢出保持隐藏状态:)

  ask by Leo translate from so

未解决问题?本站智能推荐:

1回复

移动Div时隐藏的溢出不起作用

我试图使其中有背景图像的移动div。 现在,此div有一个overflow: hidden 。 我制作了两个包含相同图像的图像标签。 第一个是具有grayscale(100%)的背景墙纸,第二个是位于div内部且隐藏了溢出的墙纸。 现在,在jquery我放置了mousemove事件以
1回复

隐藏的溢出不起作用

我有这个代码, http://jsfiddle.net/rnbcoder/WjzbH/ HTML: CSS: .mframe包含的div大于其自身。 其溢出样式设置为隐藏。 但是它不能修剪孩子。 怎么了 ?
6回复

为什么身体溢出不起作用?

为什么身体 溢出:当视口高度大于css高度时隐藏不起作用? ViewPort高度> 700px和 css高度为300px codepen http://codepen.io/vinaymavi/pen/aNMVYX div{ border: 1px das
1回复

水平溢出不起作用

基本上,我在容器中有一列来显示时间,例如电视指南,并且通过增加小时数(例如13:00至14:00),时间转到了下一行,而不是让我水平滚动,这很难解释它基本上显示了从凌晨5点到下午1点的5个小时的时间,然后转到下一行,而不是继续并允许我水平滚动。我必须像Im复制和粘贴一样在时间上拖动鼠标才能看到下
1回复

div溢出不起作用

有人可以告诉我为什么overflow:hidden;吗? 不起作用,它一直在打动我的大脑,并且尝试了各种尝试,除非这是我做的布局。 提前致谢。 在posturads.com上查看示例 提前致谢。
5回复

嵌套溢出滚动隐藏的溢出不起作用

我有一个问题,即div没有被剪切到父级,即使它有overflow: hidden 。 我已经查看了overflow: hidden这里有关于stackoverflow的overflow: hidden问题,但是大多数问题都有position问题或似乎暗示我的代码应该有效。 这是一个M
5回复

溢出不起作用-文档高度不断增加

我很困惑为什么这小部分html + css使我的$(document).height()变得巨大。 似乎溢出容器无法完全正常工作。 这是显示错误行为的jsbin: http ://jsbin.com/omokin/1
1回复

使用浮动时水平溢出不起作用

这是我的示例HTML代码 这里的例子http://jsfiddle.net/jbfDU/1/ 我想以单行显示所有文本,并且应该出现水平滚动条。 但是从示例中您可以看到它们以单行显示但是所有文本都没有显示,并且滚动条也没有按预期工作。
5回复

HTML表溢出不起作用

我想在html表体溢出时添加滚动条。我不想滚动表头。 我在我的oracle apex页面中有这些html和css代码 HTML CSS 但是使用此代码,表头也是滚动的。 这是从SO答案引用如何在html表格上显示滚动条 。 任何人都可以帮我找出这段代码中的错误吗?
1回复

HTML和CSS表溢出不起作用

我正在尝试制作一个自动溢出的表,但这似乎不起作用。 我现在拥有的: 这给了我想要的完美的东西,除非它需要溢出。 因为当它需要溢出时,它会继续前进,没有任何溢出。 当我将display:block添加到table它确实有溢出(自动)但表更短( http://prntscr.c