CSS 仅适用于网站的第一列

Question

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

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

这里是 link.

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

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%;
}

Answer 1

我不确定为什么第二列不起作用，但我想这可能是由于使用转换使文本居中所致。使用下面的 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;
}

Answer 2

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

EDIT 似乎由于某种原因将 backface-visability:hidden 添加到 .blog-post .item-meta 修复了错误。

如果您可以将 #blogposts div 设置为已知高度，您可以使用带有换行列的弹性框，例如 this - codepen example

CSS 仅适用于网站的第一列

CSS Only Works on First Column of Site

html

css

wordpress

css-multicolumn-layout