Question

如您所见，css仅适用于显示item-meta的第一列。怎么了？所有text / 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%;
}

Answer 1

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

编辑由于某种原因，似乎将import numpy as np In [74]: a = np.asarray(raw_data) In [75]: a Out[75]: array([[ 2, 2, 3, 4, 5, 6, 7], [ 0, 2, 3, 4, 5, 6, 17], [ 3, 4, 3, 4, 5, 6, 37]]) In [76]: min_max_list = [a.min(), a.max()] In [77]: min_max_list Out[77]: [0, 37]添加到backface-visability:hidden修复了该错误。

如果您可以将.blog-post .item-meta div设置为已知高度，则可以使用带有this - codepen example

之类的包裹列的flexbox

Answer 2

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

CSS仅适用于网站的第一列

2 个答案: