Question

我试图谷歌它，但大多数人只是说“使用绝对内部元素的位置，它会修复它”但我不想这样做，因为我想在容器中的盒子边缘。 / p>

这是代码：

HTML：

<div class = "main_container">
    <div class = "container">
      <div class = "box"></div>
      <div class = "box"></div>
      <div class = "box"></div>
      <div class = "box"></div>
    </div>
  </div>

CSS：

.main_container{
   position: relative;
    top: 49px;
    background-color: orange;
    height : 1446px;
    width: 1496px; 
    margin: auto;
    z-index: 5;
}

.container{
position: relative;  /* I tried using position absolute too, but it didnt work */
    background-color: white;
    top: 0;
    right: 200px;
    width: 1098.8px;
    min-width: 1098.8px;
    max-width: 1098.8px;
    height: 1041px;
    margin: 0 auto;
}

.box{
position: relative; /
    top: 50px;
    border: solid;
    border-color: grey;
    width: 208px;
    height: 335px;
    margin-right: 2px;
    margin-bottom: 3px;
    display: inline-block;
}

我该如何解决这个问题？每当我放大或缩小时，盒子都会移动？我真的花了整整一天试图解决这个问题，但没有运气。

Answer 1

看看this question。它们似乎与你自己有同样的问题，但是给出状态而不是边界的答案可以通过将它们包含在内部DIV标签内来保留。建议使用浮动将容器保持在适当位置，在您的情况下，从您的代码中将它们并排放置，您可以使用float: left;将它们相对于左侧彼此相邻排列。请务必查看JSFiddle演示here

缩小/缩小

1 个答案: