1

我有下一个html代码：

<div id="panel" style="width:100%; height: auto;position:relative; overflow: auto;">
    <fieldset style="position:relative; width: 48%;float:left;">
    ...
    </fieldset id="A" style="position:relative; width: 48%;float:left;">

    <fieldset id="B" style="position:relative; width: 48%;float:left;">
    ...
    </fieldset>
</div>

当我执行页面时，左边和右边都正确。我的问题是当我减少（当我调整大小时）资源管理器时。当然 B 设置在 A 字段集下，但宽度设置为 47%。我想在这种情况下将其调整为 100%，当我扩展资源管理器以再次调整为 47% 时。如果不问我，我希望我很清楚。

有人能给我一些想法吗？也许使用jquery，css，我不知道

4

2 回答 2

0

因此，您希望进行响应式设计，在较大的屏幕尺寸上，两个元素并排放置，而在较小的屏幕尺寸上，它们彼此重叠，但使用所有可用空间？考虑使用带有响应式网格的Bootstrap 之类的东西来实现这一点。

于 2013-11-08T12:20:16.500 回答
0

您需要的是诸如用于响应式设计的媒体查询之类的东西。

看看这个例子在这里。

相关代码是这样的：

@media only screen and (max-width: 980px) {
  fieldset{
      float: none;
      width: 97%;
  }
}

当您的屏幕适合该尺寸时，将执行此代码。

顺便说一句，我将您的 css 属性分隔到一个 css 文件中，因为将它们内联并不是一个好习惯。

媒体查询在 ie8 中不起作用，在该版本之后才起作用。

如果你想兼容ie8，你必须用javascript来做。

请看一下这个分析器：https ://stackoverflow.com/a/5770956/463065

您也可以使用modernizr来完成。

它是完全模块化的，因此您可以只下载媒体查询所需的部分，前往此处并仅选择媒体查询，下载 js 文件并将其添加到您的源代码中。

您可以在这里看到我为您制作的示例，javascript 的第一部分只是我下载的现代化程序，如果您应该包含您下载的文件，请转到 js 部分的底部以查看我实际做了什么。

于 2013-11-08T12:32:00.110 回答