要点很简单，只有 50% 的宽度，就像 codepen 中显示的上述版本一样，响应式地按预期工作，内容在灰色框顶部显示的假想容器内。当使用不均匀的百分比时会出现问题，因此固定的最大宽度仅适用于固定的窗口宽度。
是否有某种计算公式可以让它发挥作用？等等
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;
}
}
}
最佳答案
您的容器的大小等于 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>关于jquery - 有两个奇怪大小的元素是中心和边缘响应想象容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55525680/