Div根据浏览器窗口大小显示

Question

我有一个容器div，里面有很多其他的div。容器宽度为1100px，它位于浏览器窗口的中间。容器内的其他div是并排的。在这个图像示例中，我说明了三个内部div，但可以更高于它们（divD，divE等）。

如果浏览器窗口调整了一点，但没有剪切容器div，则没有任何变化。

问题是当浏览器窗口被重新编辑时，并切断了容器div。

我想要的是，在这种情况下，调整容器div宽度以适应浏览器窗口，并使容器的内部div跳到下一行，如下所示：

我该怎么做？也许bootstrap在这里很有用？

到目前为止我的HTML：

<div id="container">
    <div class="inside-div">
    </div>
    <div class="inside-div">
    </div>
    <div class="inside-div">
    </div>
    <div class="inside-div">
    </div>

.inside-div {
   width: 80px;
   height: 100px;
   background: green;
   margin-left: 35px;
   margin-top: 30px;
   display: inline-block;
}

#container {
   background: red;
   width: 400px;
   height: 500px;
   margin: 0 auto;
}

以下是演示：https://jsfiddle.net/b8do1xs8/

Answer 1

关于您的容器更改

#container {
  background: red;
  width:100%;
  max-width: 400px;
  height: 500px;
  margin: 0 auto;
}

max-width让它停在400px（或者你的情况下为1100px）; 宽度：100％，使其在小于最大宽度时适合屏幕

Answer 2

您希望为容器指定百分比而不是固定宽度。尝试

#container {
   background: red;
   width: 90%;
   height: 500px;
   margin: 0 auto;
}

Answer 3

您可以为max-width元素使用width和.container属性的组合。我已经更新了小提琴。像这样 -

＆＃13;

＆＃13;

.inside-div {
    width: 80px;
    height: 100px;
    background: green;
    margin-left: 35px;
    margin-top: 30px;
    display: inline-block;
}

#container {
    background: red;
    width: 100%;
    max-width: 400px;
    min-height: 500px;
    margin: 0 auto;
}

＆＃13;

<div id="container">
    <div class="inside-div">
    </div>
    <div class="inside-div">
    </div>
    <div class="inside-div">
    </div>
    <div class="inside-div">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用max-width而不是width将改善浏览器对小窗口的处理。

#container {
  background: red;
  max-width: 400px;
  height: 500px;
  margin: 0 auto;
}