CSS 仅适用于网站的第一列答案

【问题标题】：CSS Only Works on First Column of SiteCSS 仅适用于网站的第一列
【发布时间】：2017-08-25 05:08:26
【问题描述】：

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

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

这里是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%;
}

【问题讨论】：

请发布你的css。
完成 :) @WillDiFruscio
还有html。没有它，CSS 就毫无意义。提供指向您当前正在修复的站点的链接提供了一个移动目标，一旦修复就毫无意义。您最好在问题本身中提供minimal reproducible example9https://stackoverflow.com/help/mcve)。

标签： html css wordpress css-multicolumn-layout

【解决方案1】：

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

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

如果您可以将 #blogposts div 设置为已知高度，则可以使用带有包装列的 flexbox，例如 this - codepen example

【讨论】：

将此代码添加到 .blog-post 及其所有子项解决了该问题：-webkit-column-break-inside:avoid; -moz-column-break-inside：避免； -o-column-break-inside：避免； -ms-column-break-inside：避免； column-break-inside：避免； -webkit-backface-visibility:hidden;
我建议在您的回答中使用它来帮助他人：P
有趣，在笔上玩它，看起来backface-visability:hidden 上的.items .meta 是修复它的原因。将添加到答案。

【解决方案2】：

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

【讨论】：