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部分的底部看看我到底做了什么。

如何使字段集适合div？

2 个答案: