html - CSS：相等的并排容器超过一定宽度并且在低于该宽度时彼此顶部

Question

我有两个容器。

当屏幕为 500 像素或更少时，这些容器需要彼此叠放，并且都占据了 100% 的屏幕。

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

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

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

Answer 1

这仅在支持媒体查询的浏览器中才有可能，但遗憾的是 IE8 不支持，尽管您可以获得一个 JS 插件（Respond.js 或类似的），这将使它们在 IE8 上工作。

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

关键的代码是

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

可以在这里看到对媒体查询的支持

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

演示