Question

我在可变宽度的外部div中有一个固定大小的内部div。

＆＃13;

#outer { width: 100%; }
#inner { width: 80px; }

＆＃13;

<div id="outer">
  <div id="inner"></div>
</div>

＆＃13;

我希望将内部div放在外部div中，如下所示：

[Npx of empty space][80px fixed-size inner div][2Npx of empty space]

其中N是某个数字。随着窗口大小的改变，N将改变，但右边将保持左边大小的两倍。是否可以使用CSS？

Answer 1

作为Lister先生定位选项的替代方案，我们可以在边缘使用calc。

＆＃13;

#outer {
  width: 100%;
}
#inner {
  width: 80px;
  height: 35px;
  background: rebeccapurple;
  margin-top: 1em;
  margin-left: calc((100% - 80px) / 3);
  margin-right: calc((100% - 80px) / (3 * 2));
}

＆＃13;

<div id="outer">
  <div id="inner">
  </div>
</div>

＆＃13;

Answer 2

首先我们将内部div的两个边距都设置为auto，因此每个边距都会测量（100％ - 80px）/ 2.然后我们需要将div的1/3向左移动，所以我们相对地定位它（100％ - 80px）/ 6.

#outer {
  width: 100%;
}
#inner {
  width: 80px;
  
  margin-left: auto; margin-right: auto;
  position: relative; left: calc(13.33px - 16.67%);
  
  /* to make it visible */
  background: cyan; height: 30px
}

<div id="outer">
  <div id="inner">
  </div>
</div>

（请注意，CSS的最后一行仅用于此片段中的可见性。）

Answer 3

我做这样的事情，它会在你调整大小时运作良好。随意稍微调整百分比。

<div id="outer">
    <div id="inner-container">
        <div id="inner">
        </div>
    </div>
</div>

#outer {
    width: 100%;
}
#inner-container {
  width: 66%;
  margin: 0 auto 0 0;
}
#inner {
  width: 80px;
  margin: 0 auto;
}

如果你想玩它，我已经为你做了一个编码器。我已经提供了一些背景颜色来帮助说明发生了什么。

Example CSS offsetting

Answer 4

如果已知框的宽度，则可以避免calc，如下所示。您需要在CSS中嵌入宽度（80px）和左边距（= 80px / 3）。

＆＃13;

#outer {
  background-color: powderblue;
}
#inner {
  width: 80px;
  height: 80px;
  background-color: palevioletred;
  position: relative;
  /*
   * push 33.3% of parent width towards right
   * pull 33.3% of own width towards left
   */
  left: 33.3%;
  margin-left: -26.6px;
}

＆＃13;

<div id="outer">
  <div id="inner"></div>
</div>

＆＃13;

如何使右边距是左边距

4 个答案: