基于百分比的父项中固定宽度项目的对齐方式答案

【问题标题】：Alignment of fixed width item in percentage based parent基于百分比的父项中固定宽度项目的对齐方式
【发布时间】：2021-03-09 03:48:00
【问题描述】：

目前我有一个最大宽度为 1600 像素的外部容器，它可以缩小到基于屏幕宽度的宽度以下。

A 在外部有一个内部容器，最大宽度为 1200 像素。

我在外部容器中有一个弹性盒子，它有两个孩子，一个设置为 60% 宽度，另一个设置为 40% 宽度。我在 60% 父级中有一个 div，因此我不希望左边缘超出上面的 1200 像素容器。

问题是，我无法让 60% 父级中的 div 与 1,200 像素容器的左侧对齐。它适用于屏幕宽度高于 1,600 像素或低于 1,200 像素，但不能介于两者之间。

这是一张展示我想要实现的目标的图片：

我想出了一个使用媒体查询的解决方案，calc() 和 100vw，但是它是做作的和易碎的，因为 100vw 包括滚动条宽度。

以下是我目前所拥有的代码 sn-p（您需要在全屏模式下运行它，并调整屏幕大小以了解正在发生的事情）。

有没有我遗漏的简单计算或解决方案？

body {
        margin: 0;
        padding: 10px;
    }
    .outer {
        max-width: 1600px;
        margin: 0 auto;
        border: solid 1px green;
        color: green;
    }

    .inner {
        max-width: 1200px;
        margin: 0 auto 20px auto;
        border: solid 1px black;
        color: black;
    }

    .flex {
        display: flex;
        color: red;
    }

    .flex > div:first-child {
        width: 60%;
        border: solid 1px red;
        box-sizing: border-box;
    }

    .flex > div:last-child {
        width: 40%;
        border: solid 1px red;
        box-sizing: border-box;
    }

    .align {
        border: solid 1px blue;
        margin-left: auto;
        /* max-width: 757px;Doesn't work */

        color: blue;
    }

    @media screen and (min-width: 1220px) { /* Extra 20 pixels for body padding */
        .align {
            margin-left: calc((100vw - 1200px - 20px) / 2);
        }
    }

    @media screen and (min-width: 1620px) { /* Extra 20 pixels for body padding */
        .align {
            margin-left: 198px;
        }
    }

<body>
    <div class="outer">
        max width 1600px
        <div class="inner">max width 1200px</div>
        <div class="flex">
            <div>
                width 60%
                <div class="align">left edge to align with 1200px above</div>
            </div>
            <div>width 40%</div>
        </div>
    </div>
</body>

【问题讨论】：

如果你不想让孩子们膨胀到超过它的大小，为什么不把孩子们放在内部容器中呢？
否则，calc 是您的最佳选择，尽管使用 CSS-Grid 的东西可能是可行的。
向我们展示您的计算解决方案。 “flakey 即因为 100vw 包括滚动条宽度” - 也许可以用 100% 替换？取决于您在 where 计算的具体内容。
我已更新问题以显示我的解决方案，其中包含媒体查询和 100vw。这可以正常工作（除了 1 个像素的舍入误差），直到出现垂直滚动条。然后对齐最多可以超出 8 个像素，具体取决于滚动条宽度

标签： html css css-calc

【解决方案1】：

你差不多好了。将100vw 替换为容器宽度，在您的情况下为100%/0.6，因为父元素是60% (0.6*100%)

body {
  margin: 0;
  padding: 10px;
}

.outer {
  max-width: 1600px;
  margin: 0 auto;
  border: solid 1px green;
  color: green;
}

.inner {
  max-width: 1200px;
  margin: 0 auto 20px auto;
  border: solid 1px black;
  color: black;
}

.flex {
  display: flex;
  color: red;
}

.flex>div:first-child {
  width: 60%;
  border: solid 1px red;
}

.flex>div:last-child {
  width: 40%;
  border: solid 1px red;
}

.align {
  border: solid 1px blue;
  margin-left: auto;
  color: blue;
}

@media screen and (min-width: 1220px) {
  .align {
    margin-left: calc((100%/0.6 - 1200px) / 2);
  }
}

@media screen and (min-width: 1620px) {
  .align {
    margin-left: 200px;
  }
}

* {
  box-sizing:border-box;
}

<body>
  <div class="outer">
    max width 1600px
    <div class="inner">max width 1200px</div>
    <div class="flex">
      <div>
        width 60%
        <div class="align">left edge to align with 1200px above</div>
      </div>
      <div>width 40%</div>
    </div>
  </div>
</body>

您可以使用clamp() 简化如下代码

body {
  margin: 0;
  padding: 10px;
}

.outer {
  max-width: 1600px;
  margin: 0 auto;
  border: solid 1px green;
  color: green;
}

.inner {
  max-width: 1200px;
  margin: 0 auto 20px auto;
  border: solid 1px black;
  color: black;
}

.flex {
  display: flex;
  color: red;
}

.flex>div:first-child {
  width: 60%;
  border: solid 1px red;
}

.flex>div:last-child {
  width: 40%;
  border: solid 1px red;
}

.align {
  border: solid 1px blue;
  margin-left: clamp(0px,(100%/0.6 - 1200px) / 2,200px);
  color: blue;
}



* {
  box-sizing:border-box;
}

<body>
  <div class="outer">
    max width 1600px
    <div class="inner">max width 1200px</div>
    <div class="flex">
      <div>
        width 60%
        <div class="align">left edge to align with 1200px above</div>
      </div>
      <div>width 40%</div>
    </div>
  </div>
</body>

或者使用宽度/最大宽度：

body {
  margin: 0;
  padding: 10px;
}

.outer {
  max-width: 1600px;
  margin: 0 auto;
  border: solid 1px green;
  color: green;
}

.inner {
  max-width: 1200px;
  margin: 0 auto 20px auto;
  border: solid 1px black;
  color: black;
}

.flex {
  display: flex;
  color: red;
}

.flex>div:first-child {
  width: 60%;
  border: solid 1px red;
}

.flex>div:last-child {
  width: 40%;
  border: solid 1px red;
}

.align {
  border: solid 1px blue;
  max-width: 100%;
  margin-left: auto;
  width: calc(100% - ((100%/0.6 - 1200px) / 2));
  color: blue;
}



* {
  box-sizing:border-box;
}

<body>
  <div class="outer">
    max width 1600px
    <div class="inner">max width 1200px</div>
    <div class="flex">
      <div>
        width 60%
        <div class="align">left edge to align with 1200px above</div>
      </div>
      <div>width 40%</div>
    </div>
  </div>
</body>

为什么不在容器上填充。一个很好的单行解决方案，因为默认情况下填充被限制为 0（不能为负）

body {
  margin: 0;
  padding: 10px;
}

.outer {
  max-width: 1600px;
  margin: 0 auto;
  border: solid 1px green;
  color: green;
}

.inner {
  max-width: 1200px;
  margin: 0 auto 20px auto;
  border: solid 1px black;
  color: black;
}

.flex {
  display: flex;
  color: red;
}

.flex>div:first-child {
  width: 60%;
  border: solid 1px red;
  padding-left: calc((100% - 1200px) / 2);
}

.flex>div:last-child {
  width: 40%;
  border: solid 1px red;
}

.align {
  border: solid 1px blue;
  color: blue;
}



* {
  box-sizing:border-box;
}

<body>
  <div class="outer">
    max width 1600px
    <div class="inner">max width 1200px</div>
    <div class="flex">
      <div>
        width 60%
        <div class="align">left edge to align with 1200px above</div>
      </div>
      <div>width 40%</div>
    </div>
  </div>
</body>

【讨论】：

非常感谢！最后我选择了父级的填充选项。现在我只有calc() 没有复杂的媒体查询或100vw 和滚动条。我打算将此答案添加为书签，以供将来参考和可用选项。