Question

我有一个宽度为500px的div容器;

在这个div元素中有几个图像。

我为这些图像编写了一个jQuery代码，以便当用户点击图像时，它会显示一个大版本的图像。这个大版本必须用div包装。现在，由于其父容器，该div的宽度不能超过500px。我需要至少1200px的宽度。如何克服这个问题？

提前致谢

Answer 1

您需要将您的子div元素置于绝对位置，以便它从父元素“转义”。

HTML

<div id="parent">
    Parent
    <div id="child">Child</div>
</div>

CSS

#parent {
width:100px;
height:100px;
background-color:blue;}

#child {
position:absolute;
width:200px;
height:200px;
top:100px;
left:20px;
background-color:red;}

Answer 2

您不一定需要使用position: absolute。

width: 100%的子元素填充父元素的整个宽度。赋予它更大的宽度，例如width 300%，允许它扩展到其父级。要使其居中，您可以使用负margin-left（或简单地使用left）值将其向左轻推，使其等于添加宽度的50％。

Here's a pen of this

如何绕过容器元素的宽度限制

2 个答案: