html - 在另一个较窄的 DIV 中居中一个宽的 DIV

Question

我有两个 div，一个嵌套在另一个中。主 div 具有 css 属性 max-width:100%，因此它不能比用户屏幕更宽。现在，第二个 div 非常宽 (1400px)，并且包含许多其他元素，但并不是所有的边缘都需要被看到。那么，如何(理想情况下没有 Javascript)让第二个宽的 div 位于第一个 div 的中心，这样当用户屏幕只有 1000px 宽，而不是第一个 1000px 在显示的宽 div 和裁剪的剩余部分中，200px 从左侧和右侧裁剪，1000px 从中心截取？

代码

<div style="max-width:100%">
    <div style="position:relative;width:1400px">
        <!-- PICTURES, LINKS, ETC -->
    </div>
</div>

Answer 1

您可以使用一种称为收缩包装的技术来实现这一点。您将需要一个额外的 div 包裹较大的内部 div，将其相对向左拉。与其容器相比，内部 div 可以自行纠正并将自己拉到右边的一半。这应该会达到您想要的效果。

<div class="max-width-container">
    <div class="shrink-wrap">
        <div class="very-wide-inner-div"></div>
    </div>
</div>

.shrink-wrap {
   float: right;
   position: relative;
   left: -50%;
}
.very-wide-inner-div {
   position: relative;
   left: 50%;
   width: $some_huge_number;
}

http://jsfiddle.net/2j2mh/