0

如您所见，css 仅适用于第一列以显示 item-meta。怎么了？所有的文本/元都在正确的位置，如果你检查它，它就在那里。只是出于某种原因，它不想将不透明度改回 1。这很奇怪，因为它显然在第一列中工作，而且都是相同的代码。此外，该项目显然可以正常工作，因为正在显示深色叠加层。

当您调整窗口大小以使其显示为 2 列时，第一列中会出现更多帖子并且它们工作正常。

这是链接。

[编辑]：如果您悬停足够长的时间，则会出现第二列中的内容。

CSS：

#blog-posts {
    text-align: center;
    display: inline-block;
    width: 100%;
    padding: 0;
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-gap: 0.2em;
    -moz-column-gap: 0.2em;
    -webkit-column-gap: 0.2em;
}

.blog-post img {
    width: 100%;
    height: auto;
}

.blog-post {
    width: 100%;
    height: auto;
    margin: 0 0 0.2em;
    display: inline-block;
    position: relative;
    vertical-align: top;
}

.blog-post .item {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.blog-post .item-meta {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.blog-post h3 {
    font: 2em Lato;
    text-transform: uppercase;
    word-wrap: normal;
    color: white;
    vertical-align: middle !important;
    position: relative;
    display: inline-block;
    width: auto;
    line-height: 1em;
}

.attachment-post-thumbnail {
    position: relative;
    width: 100%;
    display: inline-block;
    height: 100%;
}

.blog-post .item:hover {
    opacity: 1;
}

.content {
    position: relative;
    float: right;
    // border: 1px solid yellow;
    word-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    width: 86%;
    overflow: hidden;
    padding-right: 10%;
    padding-left: 10%;
}
4

2 回答 2

1

这是 CSS 列中的错误。CSS 列实现中仍然存在很多错误，因此它们没有被广泛使用。如果你用谷歌搜索“CSS column hover bug”，你会发现类似的问题。

编辑似乎出于某种原因添加backface-visability:hidden到.blog-post .item-meta修复了该错误。

如果您可以将#blogpostsdiv 设置为已知高度，则可以使用带有包装列的 flexbox，如下所示 - codepen 示例

于 2016-08-09T03:48:30.207 回答
0

我不确定第二列为什么不起作用，但我可以弄清楚这可能是由于使用转换使文本居中引起的。使用下面的 css 将提供预期动画的内容居中。

.blog-post .item {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
    text-align: center;
    white-space: nowrap;
}

.blog-post .item:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.blog-post .item-meta {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.blog-post h3 {
    font: 2em Lato;
    text-transform: uppercase;
    word-wrap: normal;
    color: white;
    vertical-align: middle !important;
    position: relative;
    display: inline-block;
    width: auto;
    line-height: 1em;
}
于 2016-08-09T03:38:17.730 回答