如何以2:1的比例正确对齐相邻两个方框的内容

Question

我的用例如下：

我有一个中心对齐布局，最大宽度为360 max。

该布局的一部分是一个带有两个相邻框的容器。右边的一个包含一个填充窗口33%宽度的图像。剩下的应该是一个文本容器。此文本容器应与其余中心对齐布局的左边框对齐。

下面是它的草图：

​

body {
  display: flex;
  flex-direction: column;
}

.col {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-start {
  align-items: flex-start;
}

.top {
  max-width: 360px;
  width: 100%;
  height: 50px;
  background: tomato
}

.width-2-3 {
  width: 66.666%;
}

.width-1-3 {
  width: 33.3333%
}

.left-content,
.right-content {
  width: 100%;
  height: 50px;
}

.left-content {
  max-width: 240px;
  background: rebeccapurple;
  color: white;
}

.right-content {
  background: pink;
}

<div class="col items-center">
  <div class="top"></div>
</div>
<div class="row">
  <div class="width-2-3 col items-end">
    <div class="left-content">text</div>
  </div>
  <div class="width-1-3 col items-start">
    <div class="right-content">[img]</div>
  </div>
</div>

​

所以基本上我的目标是左对齐这两行，不管窗口的宽度有多大。但经过一段时间的努力，我就是搞不懂数学！因此，任何帮助都将不胜感激:)

Answer 1

由于@temani-afif，我想出了一个只需一行就可以更改的解决方案。

- max-width: calc(240px);
+ max-width: calc(180px + 25%);

这样，文本容器总是与顶部容器对齐，同时占用所有可用空间，直到33%的窗口宽度图像容器启动为止。这适用于所有的窗口大小。谢谢大家的帮助！)

​

body {
  display: flex;
  flex-direction: column;
}

.col {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-start {
  align-items: flex-start;
}

.top {
  max-width: 360px;
  width: 100%;
  height: 50px;
  background: tomato
}

.width-2-3 {
  width: 66.666%;
}

.width-1-3 {
  width: 33.3333%
}

.left-content,
.right-content {
  width: 100%;
  height: 50px;
}

.left-content {
  max-width: calc(180px + 25%);
  background: rebeccapurple;
  color: white;
}

.right-content {
  background: pink;
}

<div class="col items-center">
  <div class="top"></div>
</div>
<div class="row">
  <div class="width-2-3 col items-end">
    <div class="left-content">text</div>
  </div>
  <div class="width-1-3 col items-start">
    <div class="right-content">[img]</div>
  </div>
</div>

​

Answer 2

您可以考虑留下的负差：

​

body {
  display: flex;
  flex-direction: column;
  margin:0;
}

.col {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.items-center {
  align-items: center;
}

.top {
  max-width: 360px;
  width: 100%;
  height: 50px;
  background: tomato
}

.width-2-3 {
  width: 66.666%;
}

.width-1-3 {
  width: 33.3333%
}

.left-content,
.right-content {
  width: 100%;
  height: 50px;
}

.left-content {
  max-width: 240px;
  background: rebeccapurple;
  color: white;
}

.right-content {
  background: pink;
}

@media (min-width:360px) {
.left-content {
  margin-left:calc((150% - 360px)/2); /* 150 is 3/2*100% since the width is 2/3*/
}

.right-content {
  margin-left:calc(240px + ((200% - 360px)/2) - 150%); /*200% is equal to 150% of the left element */
}

}

<div class="col items-center">
  <div class="top"></div>
</div>
<div class="row">
  <div class="width-2-3 col">
    <div class="left-content">text</div>
  </div>
  <div class="width-1-3 col">
    <div class="right-content">[img]</div>
  </div>
</div>

​

Answer 3

为什么不去掉.item-end和.item-start div，这样就可以轻松地控制内容了。

body {
  display: flex;
  flex-direction: column;
}

.container {
    position:relative;
    max-width:360px;
    width:100%;
    display:flex;
    justify-content:center;
}

.different-width {
    max-width:450px;
}

.col {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.items-center {
  align-items: center;
}

.content-center {
  justify-content:center;
}

.top {
  max-width: 360px;
  width: 100%;
  height: 50px;
  background: tomato
}

.left-content,
.right-content {
  width: 100%;
  height: 50px;
}

.width-2-3 {
  width: 66.666%;
}

.width-1-3 {
  width: 33.3333%
}

.left-content {
  max-width: 240px;
  background: rebeccapurple;
  color: white;
}

.right-content {
  background: pink;
}

<div class="col items-center">
  <div class="container">
    <div class="top"></div>
  </div>
</div>
<div class="row content-center">
  <div class="container different-width">
    <div class="left-content width-1-3">text</div>
    <div class="right-content width-2-3">[img]</div>
  </div>
</div>

​

如果需要更多地控制left-content和right-content宽度，请考虑使用flex-grow和flex-basis。

如果要控制第二个container的宽度，可以使用不同的max-width值创建另一个类。