如何使fieldset适合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的第一部分是我下载的现代化程序，在你的情况下，你应该包括你下载的文件，转到js部分的底部看看我到底做了什么。