Question

我开始研究当前项目的一部分图标。

问题当我使用display: table-cell;并将媒体查询的三种.icon样式更改为width: 100%;而不是32%时。另外两个消失了，而第一个仍在显示。

我想出了如何通过将其更改为display: block;来解决这个问题，但我对其他两个div消失的原因感到有些困惑。

这是他们的css：

.icon {
    display: table-cell;
    vertical-align: middle;
    width: 32%;
    position: relative;
    border-radius: 5px;
    padding: 15px 0;
}

另外，这是一个小提琴：DEMO

关于这里发生了什么的任何想法？ table-cell是否必须水平对齐而不是在下面分解？当我在控制台中检查它们时，它说第一个宽度为500像素，而另外两个为0.

Answer 1

表格布局似乎在该宽度处打破，另一种解决方案是在媒体通话中将display .icon属性设置为table-row。这使得它将div解释为行而不是行中的单元格，并将它们垂直堆叠。

这是 fiddle

@media only screen and (max-width: 680px) {
    .icon {
    width: 100%;
    display: table-row;
    }
}

说实话，我不确定为什么桌面布局会破坏你的代码，但我可以解释为什么上面的小提琴有效，所以我想这是一个解决方法而不是修复。

Answer 2

display: table-row否定position: relative，因此.iconInfo现在将与.chat-icons相关联。由于.iconInfo的高度为100％，因此它们会占用整个div。它们也会按照它们在html中的顺序堆叠，因此底部.iconInfo位于顶部，这就是为什么该图像始终在悬停时激活。

这感觉有点hacky因为我使用了一个“看起来正确”的数字，但是你走了。由于定位的变化，我还必须更改.icon而不是.iconInfo的背景：

<强> DEMO

@media only screen and (max-width: 680px) {
.icon {
    display: table-row;
}
.icon:hover {
    background: rgba(0,0,0,0.2);
}
.iconInfo {
    position: relative;
    height: auto;
    display: block;
    margin-top: -20%;
}
}

可能会有一些样式调整，但这会让你得到你想要的东西（我想）。

为什么显示：table-cell;用媒体查询隐藏其他元素？

2 个答案: