将固定 div 固定到居中主 div 的右侧答案

【问题标题】：Pin fixed div to the right side of centered main div将固定 div 固定到居中主 div 的右侧
【发布时间】：2018-02-13 22:50:08
【问题描述】：

有两个div，一个是.main，用于主要内容；一个是.aside 用于一些设计装饰。

我只想在桌面上显示，所以我把它放在媒体查询中。当视口正好为 1000px 时，您可以完美地看到 main 右侧的侧面引脚，没有任何间隙或重叠。

但是当它大于 1000px 时，它们会开始重叠，我不希望它发生。 有没有办法只用 CSS 来保持两个 div 的关系，还是我需要 JS？ 换句话说，aside 的左边缘总是附加到 main 的右边缘。

我尝试使用calc()，但找不到正确的数学公式。另请注意，position:fixed for aside 是必需的，因为在实际情况下，它针对更大的屏幕，元素更大，并且永远不应该触发水平滚动条。

codepen

body {
  margin: 0;
}

.main {
  max-width: 400px;
  height: 100px;
  margin: 0 auto;
  background: pink;
}

@media (min-width: 1000px) {
  .aside {
    position: fixed;
    left: 700px;
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
  }
}

<div class="main"></div>
<div class="aside"></div>

【问题讨论】：

标签： html css responsive-design css-position

【解决方案1】：

在aside 元素上使用left: calc(50% + 200px);，这将始终将其放置在水平中心右侧200px 处：

body {
  margin: 0;
}

.main {
  max-width: 400px;
  height: 100px;
  margin: 0 auto;
  background: pink;
}

@media (min-width: 1000px) {
  .aside {
    position: fixed;
    left: calc(50% + 200px);
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
  }
}

<div class="main"></div>
<div class="aside"></div>

【讨论】：

你能澄清200px在calc中的位置吗？
@Stickers 主体宽度的一半。因为主要在中心所以从中心我们在每边都有200px
@TemaniAfif 谢谢，我的脑袋现在太大了，因为实际情况有点复杂。
@Stickers 向我们展示真实案例，我们会得到它；）
@TemaniAfif 我会回到这个问题上，顺便说一句，我知道你在另一个答案上。

【解决方案2】：

您可以使用以下公式。您的main 的最大宽度为 400 像素，屏幕宽度为 100%，因此两边的边距为 (100% - 400px)，我们除以 2 只得到一侧。

你也可以引入 CSS 变量来更好的处理这个

:root {
  --main-width: 400px;
}

body {
  margin: 0;
}

.main {
  max-width: var(--main-width);
  height: 100px;
  margin: 0 auto;
  background: pink;
}

@media (min-width: 1000px) {
  .aside {
    position: fixed;
    right: calc((100% - var(--main-width)) / 2);
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
  }
}

<div class="main"></div>
<div class="aside"></div>

如果您希望aside 位于外部，只需从之前的计算中删除它的宽度：

:root {
  --main-width: 400px;
}

body {
  margin: 0;
}

.main {
  max-width: var(--main-width);
  height: 100px;
  margin: 0 auto;
  background: pink;
}

@media (min-width: 1000px) {
  .aside {
    position: fixed;
    right: calc(calc((100% - var(--main-width)) / 2) - 200px);
    top: 0;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
  }
}

<div class="main"></div>
<div class="aside"></div>

如果您想将其应用于左侧，则相同的逻辑。

((100% - width of main) / 2) - width of aside

或者

50% - (width of main/2) - width of aside

【讨论】：