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

Question

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

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

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

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

这是一张展示我正在努力实现的目标的图片：

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

下面是我到目前为止的代码片段（您需要运行在全屏模式下执行此操作，然后调整屏幕大小以了解发生了什么）。

是否有我缺少的简单计算或解决方案？

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>

Answer 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>

或使用width/max-width:

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>

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

Alignment of fixed width item in percentage based parent

html

css

css-calc