扩展div通过父容器，同时保持子容器内的子div

问题描述：

这似乎并不像它应该是一个困难的问题，但我想不出一个可行的解决方案。扩展div通过父容器，同时保持子容器内的子div

我想要从页面左侧有一个div超出其父容器（使用Bootstrap 3，因此是1170px最大宽度的容器）。在那里，我需要另一个居中容器，所以文本和按钮不会超过1170px。

这里是什么，我需要实现一个截图：

编辑：我不认为我是明确的，因为我本来是什么，我试图实现。文本背后的白色div的绝对定位只是为了让div延伸到容器的左侧，但并不重要。目标只是将文本和按钮保留在居中的容器中，但围绕文本的白色div和按钮会延伸到窗口的左侧。我编辑了这个问题，使其更加清晰。

无论如何，我想出了一个简单的方法。我只用过：

margin-left: -9999px 
padding-left: 9999px

上白色的div让它向左延伸，不用绝对定位。它对我来说似乎仍然不正确，但工作正常。

你的代码在哪里？你有什么尝试？ – VaMoose 2015-02-23 09:36:28

你在说什么，你试图做什么，你张贴的图片显示是两个不同的东西。文字和按钮在半透明容器内左对齐。这只是容器有一个渐变，所以它在最左边是透明的 – winhowes 2015-02-23 09:40:52

http://stackoverflow.com/questions/28539423/bootstrap-column-to-extend-out-side-of-the-container – jsg 2015-02-23 09:50:13

答

将孩子div来

div.parent { 
 
position:absolute; 
 
background:#ccc; 
 
left:0; 
 
height:100%; 
 
width:100%; 
 
} 
 

 
div.child { 
 
position: relative; 
 
left: 25%; 
 
background: #fff; 
 
width: 50%; 
 
height: 50%; 
 
top: 25%; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    </div> 
 
</div>

你必须调整高度/宽度和改变根据您的喜好顶部/左百分比。关键是具有绝对的内

答

相对容器如果你知道孩子容器的宽度，并希望

水平居中的DIV，做

position: relative; 
left:50%; 
margin-left:-childContainerWidth/2;

或居中的div ，做

position: relative; 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%);

如果它是未知的宽度/高度为中心的情况下，你可以试试这个guide

扩展div通过父容器，同时保持子容器内的子div

相关推荐