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>

这是我想要完成的草图（注意容器外面的小盒子）：

Visual Aid

任何人都可以提供一种方法来完成这项工作（当盒子堆叠时（480px），最好不需要乱七八糟的CSS吗？

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%;
}

在响应式设计中使div出现在容器外部

1 个答案: