我正在尝试使用“display:table”创建响应列,这就是我想出来的。
http://jsfiddle.net/ejkim2000/NXmfk/
HTML
<body>
<section id="colors">
<ul id="columns">
<li class="red">red</li>
<li class="yellow">yellow</li>
<li class="blue">blue</li>
</ul>
</section>
</body>
CSS
body { height: 100%;
width: 100%;
background-color: #ccc;
}
#colors {
display:block;
overflow:hidden;
position:relative;
height: 1000px;
width: 100%;
}
#columns {
height: 100%;
width: 100%;
display: table;
}
#columns li {
overflow:hidden;
width: 33.33%;
text-align: center;
vertical-align: middle;
display: table-row;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
@media only screen and (min-width: 479px) {
#colors {
height: 320px;
width: 100%;
}
#columns li {
display: table-cell;
}
}
@media only screen and (min-width: 768px) {
#colors {
height: 700px;
width: 100%;
}
#columns li {
display: table-row;
}
}
@media only screen and (min-width: 980px) {
#colors {
height: 700px;
width: 100%;
}
#columns li {
display: table-cell;
}
}
无论是旋转浏览器的演示文稿还是调整窗口大小,它都适用于Firefox,IE9和Chrome(桌面)。它没有显示任何问题。
然而,它显示了Safari(桌面),Safari(移动)和chrome(移动)的非常奇怪的行为。它在开头显示正确的列,但是一旦我旋转屏幕或调整窗口大小,它基本上会添加一个或两个空列。如果你使用safari重新调整上面的jsfiddle示例,你会得到这个想法,或者image显示它是如何做的:
我一直在寻找答案,但似乎没有人像我一样有问题。
你能帮我解决这个问题吗?