从引导容器左侧向屏幕右侧扩展的div

我想要实现的是一个DIV，它位于引导程序的容器内，跨越容器右侧的全宽（直到它碰到屏幕），但是在左侧的INSIDE容器中。

示例代码：

<div class="container"> 
    <div class="extended-div"></div> 
</div>

我只是想延长div来坚持容器元素的左侧，跨越一路到屏幕的距离有正确的（外容器）。

我附上我想要实现的一个例子。通常情况下，如果盒子只有BG颜色等，我可以选择box-shadow或者：方法之后，但这不起作用。

Here's what I'm trying to achieve

提前感谢！

来源

2016-04-16 Karolis

您可以添加一些代码来添加更多的信息？ – Maske

添加了一个代码示例。 – Karolis

还没有回答我的问题。 – Karolis

尝试给位置绝对的扩展股利和你没有正确关闭你的类标签的集装箱

<div class="container"> 
<div class="extended-div"></div> 
</div>

来源

2016-04-16 13:13:57 user3045179

还没有回答我的问题。 – Karolis

首先正确地关闭你的类标记为container。根据需要增加子div的宽度。

.container{ 
 
    background-color:red; 
 
    } 
 
.extended-div 
 
{ 
 
    background-color:green; 
 
    width:110%; 
 
    margin-left:20px; 
 
    margin-top:20px; 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="extended-div"> 
 
     <h1> 
 
      jfksdjfksdjfds 
 
     </h1> 
 
     <h1> 
 
      overflow div sssssssssssssssssssddsssssssdddddddddddd 
 
     </h1> 
 

 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

来源

2016-04-16 16:45:23

还没有回答我的问题。 – Karolis

从引导容器左侧向屏幕右侧扩展的div

回答

相关问题