Question

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

CODE

<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是.wide div

宽度的一半

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

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

将广泛的DIV置于另一个较窄的DIV中

2 个答案: