在响应性设计中使div出现在容器之外。

Question

我试图让一些浮动元素出现在使用基于Omega的主题的drupal页面的容器之外。我的页面目前的结构如下：

<h2>Some header text</h2>
<div class="grid-12 region region-content center" id="region-content">
  <div class="container-12">
    <div class="pricing-main-background">
      <div class="grid-4 plan-box-orange">
      </div>
      <div class="grid-4 plan-box-green">
      </div>
      <div class="grid-4 plan-box-orange">   
      </div>
    <div class="pricing-subtext">
      some more text down here            
    </div>
  </div>
 </div>
</div>

下面是我想要完成的任务的草图(注意容器外的较小的盒子)：

视觉辅助

有人能帮助提供一种方法来使这个工作(更好地说，不需要混乱的CSS时，盒子堆叠(480 to )？

Answer 1

像这样吗？

h2
{
    width:60%;
    border:1px solid black;
    border-bottom:0;
    margin:0 auto;
    text-align:center;
}
.grid-12
{
    width:60%;
    border:1px solid black;
    margin:0 auto;
    text-align:center;
}
.pricing-main-background {position:relative;}
.plan-box-orange {background:orange;}
.plan-box-green {background:green;}
.grid-4
{
    display:inline-block;
    width:30%;
    height:50px;
    margin-top:25px;
}
.grid-4:nth-of-type(1)
{
    position:absolute;
    left:-10%;
}
.grid-4:nth-of-type(3)
{
    position:absolute;
    right:-10%;
}