Question

我有一个带有内容包装器的上部块和一个底部块，它由两个相同的块组成，里面还有内容包装器。

https://plnkr.co/edit/DTar7Wy5e37HnqbU2Gud?p=preview

<div class="upper">
  <div class="wrap"></div>
</div>
<div class="bottom">
  <div class="left">
    <div class="left-wrap"></div>
  </div>
  <div class="right">
    <div class="right-wrap"></div>
  </div>
</div>

包装块有一个虚线边框。

无论屏幕有多大或多小，较小的底部包裹块总是与上面较大的一块相同，因为较小的块具有150px的最大宽度，这是上部包装块的最大值的一半 - 宽度。

但是当您将底部组成块的宽度从50％更改为40％和60％时，较小的包装块的位置也会发生变化。

https://plnkr.co/edit/FTmHxm2F3vD8LhF5DM0d?p=preview

您可以将其最大宽度更改为其他一些数字（在我的示例中为99和201），但似乎无法使它们始终保持与上部包裹相同的位置。

那么，有没有办法让第二个例子中的这些包装器像第一个例子一样使用50％？

Answer 1

您还需要在底部块中包装内容：

<div class="bottom">
  <div class="wrap wrap-down">
    <div class="left">
      <div class="left-content"></div>
    </div>
    <div class="right">
      <div class="right-content"></div>
    </div>
  </div>
</div>

在你的css中添加我创建的新.wrap-down类：

.wrap-down{
  display:flex;
}

并删除dotted black和.left-content的{{1}}边框。

你遇到的问题是你在你的.right-content区域内进行了包裹，因此你占据了upper div类（最近的父级）宽度的90％。

在您失败的区块中，您占据了.upper类的40％和60％，这是页面宽度的100％而不是90％（通过包装）在第一种情况下。

Here您可以使用.bottom来查看效果。

如果您对此有疑问，请告诉我。

编辑： This JSFiddle如果您使用其他解决方案将块的左侧和右侧设置为50％，则可以正常工作。我想把它换成另一个百分比。如果新的更改有效，我将进行编辑。

编辑2：最后，我找到了解决问题的方法。请参阅以下JSFiddle。你放到JSFiddle或.left类的百分比无关紧要，它会产生你想要达到的效果。

保持包装块的位置

1 个答案: