html - 为什么显示: table-cell; hide other elements with media queries?

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

另外，这里有一个 fiddle :DEMO

对这里发生的事情有什么想法吗？ table-cell 是否必须水平对齐并且不能在下方分解？当我在控制台中检查它们时，它说第一个的宽度为 500ish 像素，而另外两个为 0。

Answer 1

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

这是一个 fiddle

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

老实说，我现在不确定为什么表格布局会破坏您的代码，但我可以解释为什么上面的 fiddle 有效，所以我想这是一种解决方法，而不是修复方法。