将一个较宽的DIV集中在另一个较窄的DIV中

Question

我有两个div，一个嵌套在另一个中。主div具有css属性max-width:100%，因此它不能比用户屏幕更宽。现在，第二个div非常宽（1400px），并且包含许多其他元素，但不需要看到所有边上的元素。那么，（理想情况下没有Javascript）我如何让第二个宽div居中在第一个div内，这样当用户屏幕只有1000px宽时，而不是显示宽div的第一个1000px和裁剪其余部分时，从左到右裁剪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/

Answer 2

假设你的html看起来像这样：

<div class="narrow"><div class="wide">blah de blah</div></div>

我想你可以用这样的东西来做：

.narrow {width:1000px; overflow:hidden;}
.wide {width:1400px; position:relative; left:50%; margin-left:-700px;}

margin-left是.widediv 宽度的一半

如果你检查小提琴中的元素，你会看到它位于的中间

http://jsfiddle.net/peteng/dtNKr/4/