Question

我有两个容器。

当屏幕为500px或更低时，这些容器需要彼此叠加，并且两者都占据屏幕的100％。

当屏幕超过500px时，它们需要并排占据屏幕水平空间的相等宽度。

这需要在ie8中工作。我无法使用媒体查询。

这可能只是使用CSS吗？（没有JavaScript）

Answer 1

这仅适用于支持媒体查询的浏览器，但遗憾的是IE8没有，尽管你可以获得一个JS插件（Respond.js或类似的），使它们可以在IE8上运行。

This是支持媒体查询的浏览器中的工作版本

关键代码是

@media 
  screen and (max-device-width: 500px), 
  screen and (max-width: 500px) {

可以看到对媒体查询的支持here

Answer 2

使用媒体查询

<强> HTML

<div class="container">
<div class="dv">First block</div>
<div class="dv2">Second block</div>
</div>

<强> CSS

.container{width:500px; background:grey}
.dv{ background:green;  width:500px; height:250px}
.dv2{ background:red;  width:500px; height:250px }

@media screen and (min-width : 500px)
{
    .container{width:100%; background:grey; overflow:auto}
    .dv{width:50%; float:left}    
    .dv2{width:50%; float:left}
}

DEMO

CSS：在高于一定宽度的情况下并排容器并且在低于该宽度时彼此叠加

2 个答案: