如何使字段集适合 div？

Question

我有下一个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，我不知道

Answer 1

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

Answer 2

您需要的是用于响应式设计的媒体查询。

Take a look at this example here.

相关代码是这样的：

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

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

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

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

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

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

您也可以使用modernizr。

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

你可以看到我为你做的一个例子here，javascript的第一部分就是我下载的modernizer，如果你应该包含你下载的文件，到js部分的底部看看我实际上做了什么。