Question

我希望实现容器div中的框调整大小并在调整浏览器窗口时调整其内部。容器调整大小目前工作正常，但我的子元素有问题。我尝试过不同的方法，但没有得到理想的结果。

＆＃13;

Documents

＆＃13;

.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;
}

＆＃13;

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显示块和float：left或float：right然后放

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

在他们之后清除浮动功能。或者，如果你不想让它们内联，那么只需让它们显示：block，它们就会一个接一个地掉落。你可能不想要的是绝对定位，因为你似乎有一个非常相似的div列表。绝对定位更适合奇怪布局的利基案例。此外，顶部，左侧，右侧和底部样式仅在位置为绝对，固定或相对时应用，因此如果您在内框上使用默认静态定位，则不需要这些样式。

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

1 个答案: