响应式设计：当浏览器窗口被调整大小时，如何根据容器div来调整盒子

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显示块和浮动：左或浮动：对，然后把

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

之后清除浮动功能。或者，如果你不想让他们内联，那么就让他们显示：block，然后他们就会一个接一个掉下来。你可能不想要的是绝对定位，因为你似乎有一个非常相似的div列表。绝对定位更适合怪异布局的特殊情况。此外，顶部，左侧，右侧和底部样式仅适用于绝对位置，固定位置或相对位置，因此如果您在内部框中使用默认静态定位，则不需要这些样式。