0

我有两个 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>
4

2 回答 2

3

您可以使用一种称为收缩包装的技术来实现这一点。您将需要一个额外的 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/

于 2013-08-30T14:17:56.690 回答
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;}

是divmargin-left宽度的一半.wide

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

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

于 2013-08-30T14:16:44.887 回答