时间戳

首页 > 解决方案 > 让两个奇怪大小的元素响应地位于想象容器的中心和边缘

jquery - 让两个奇怪大小的元素响应地位于想象容器的中心和边缘

问题描述

要点很简单，宽度为 50%，如 codepen 中显示的上述版本，按预期响应，内容位于灰色框顶部显示的虚构容器内。使用不均匀百分比时会出现问题，因此固定的最大宽度仅适用于固定的窗口宽度。

是否有某种计算公式可以使它起作用？ETC

https://codepen.io/rKaiser/pen/NmNrXp

.uneven {
  .right,
  .left {
    width:65.3%;
    .content {
      max-width:420px;
      margin-left:auto;
    }
  }
  .right {
    width:34.7%;
      .content {
       max-width:180px;
       margin-left:0;
       margin-right:auto;
    }
  }
}

标签： jqueryhtmlcss

解决方案

您的容器的大小等于W（600px在您的示例中）然后我们的完整容器是全屏的，100vw因此两侧的边距等于，(100vw - W) / 2因此您可以简单地将该边距与内部元素一起使用。

小缺点是100vw还包括滚动条的宽度，所以当有滚动条时计算会稍微偏离：

body {
  background: #666;
  margin: 0;
}

.container {
  height: 100px;
  background: #888;
  max-width: 600px;
  margin: 0 auto;
}

.full {
  display: flex;
  background: orange;
  height: 45px;
  margin-bottom: 4px;
}

.left {
  width: 50%;
  background: #16CC4A;
}

.left .content {
  margin-left: calc((100vw - 600px)/2);
  border: 1px solid red;
}

.right .content {
  margin-right: calc((100vw - 600px)/2);
  border: 1px solid red;
  text-align: right;
}

.right {
  background: #D98813;
  width: 50%;
}

.uneven .left {
  width: 65.3%;
}

.uneven .right {
  width: 34.7%;
}

@media all and (max-width:600px) {
  .left .content,
  .right .content {
    margin: 0;
  }
}
<body>
  <div class="container"></div>
  <div class="full even">
    <div class="left">
      <div class="content">
        Edge
      </div>
    </div>
    <div class="right">
      <div class="content">
        Edge
      </div>
    </div>
  </div>
  <div class="full uneven">
    <div class="left">
      <div class="content">
        Edge
      </div>
    </div>
    <div class="right">
      <div class="content">
        Edge
      </div>
    </div>
  </div>
</body>

推荐阅读