css - 响应式设计 : How to adjust boxes according to container div when browser window gets resized

Question

我想实现在调整浏览器窗口大小时容器 div 内的框调整大小并适合其中。目前容器大小调整工作正常，但我对它的子元素有疑问。我尝试了不同的方法，但没有得到想要的结果。

.container {
  position: relative;
  width: 21%;
  min-width: 262px;
  height: 202px;
  left: 47px;
  top: -164px;
  background-color: green;
  border-radius: 2px;
  box-shadow: 5px 5px 5px #111111;
  border-style: solid;
  border-color: white;
  border-width: 5px;
}

#box_inside_1 {
  position: relative;
  width: 16%;
  min-width: 50px;
  height: 50px;
  top: -36px;
  left: 29px;
  background-color: white;
  box-shadow: 5px 5px 5px #111111;
  border-radius: 2px;
}

#box_inside_2 {
  position: relative;
  width: 16%;
  min-width: 50px;
  height: 50px;
  top: -105px;
  left: 260px;
  background-color: white;
  box-shadow: 5px 5px 5px #111111;
  border-radius: 2px;
}

#box_inside_3 {
  position: relative;
  width: 16%;
  min-width: 50px;
  height: 50px;
  top: -172px;
  left: 515px;
  background-color: white;
  box-shadow: 5px 5px 5px #111111;
  border-radius: 2px;
}

<div class="container">
   <div id="box_inside_1"></div>
   <div id="box_inside_2"></div>
   <div id="box_inside_3"></div>
</div>

Answer 1

容器可能应该是有一个 id 的东西，而盒子应该有一个类。例如，如果你想在容器中有 3 个内联 div，你可以这样做:

<style>
    #container {
        position: relative;
        text-align: center;
    }
    .box-inside {
        display: inline-block;
        width: 16%;
        height: 50px;
    }
</style>
<div id='container'>
    <div class='box-inside'>
    </div>
    <div class='box-inside'>
    </div>
    <div class='box-inside'>
    </div>
</div>

或者，您也可以让内部 div 显示 block 和 float :左或 float :右，然后放置

<div style="clear:both;"></div>

在他们之后清除 float 功能。或者，如果您不希望它们内联，那么只需让它们显示: block ，它们就会一个接一个地掉落。你可能不想要的是绝对定位，因为你似乎有一个非常相似的 div 列表。绝对定位更适合奇怪布局的小众案例。此外，top、left、right 和 bottom 样式仅在位置为绝对、固定或相对时适用，因此如果在内盒上使用默认静态定位，则不需要这些样式。