gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:01:15 26 4
gpt4 key购买 nike

我开始为我当前的元素制作一部分图标。

问题是,当我使用 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。

最佳答案

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

这是一个 fiddle

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

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

关于html - 为什么显示: table-cell; hide other elements with media queries?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21291512/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com