应用 position relative 然后 position:absolute 使 div 跨容器伸展？

Question

这是我的代码..

<div id="secondWrapper">
    <div class="para1">  
      <div class="heading">
        <h1>Heading 1</h1>
      </div>
      <div class="paragraph">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ipsum in nunc dignissim fringilla. Donec porta elit ut diam eleifend eget rhoncus risus dignissim. Vivamus malesuada accumsan molestie. Maecenas lobortis, ipsum sit amet mattis tincidunt, turpis odio tempus massa, at scelerisque elit diam id dolor. 
        </p>
      </div>
    </div>
    <div class="para2">  
      <div class="heading">
        <h1>Heading 2</h1>
      </div>
      <div class="paragraph">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ipsum in nunc dignissim fringilla. Donec porta elit ut diam eleifend eget rhoncus risus dignissim. Vivamus malesuada accumsan molestie. Maecenas lobortis, ipsum sit amet mattis tincidunt, turpis odio tempus massa, at scelerisque elit diam id dolor. 
        </p>
      </div>
    </div>
    <div class="social_icons">
      <a class="btn" href="#">
          <i class="icon-twitter-sign icon-large"></i> Follow us on Twitter</a>

      <a class="btn" href="#">
          <i class="icon-facebook-sign icon-large"></i> Find us on Facebook</a>

      <a class="btn" href="#">
         <i class="icon-facetime-video icon-large"></i> Subscribe on Youtube</a>
    </div>
  </div><!-- /container -->

还有 CSS...

    #secondWrapper{
    height:144px;
    width:740px;
    margin:0 auto;
    position: relative
    }

.para1 {
    width:211px;
    padding-right: 39px;
    display: block;
    overflow: hidden;
    float: left
}

.para2 {
    width:211px;
    padding-right: 39px;
    display: block;
    float: left;
}

.social_icons {
    width: 211px
    display: block;
    position:absolute;
}

.heading {
    padding-bottom:31px;
}

.paragraph {
    width:211px;
}

这是我的问题。使用上面的代码，social_icons div 中包含的社交图标浮动到 div 的顶部，并没有真正给我我正在寻找的外观。

所以，我想将它们放置在 div 的底部，以便它们与页面上的其余文本更加一致。这样做的一种方法（谷歌说）。是将position: absolute 应用于我的容器div (secondWrapper)，然后将position:relative 和bottom: 0 应用于social_icons div。

但是，当我这样做时，它只会在我的页面上拉伸 div 内容，而忽略我已经应用的 width 约束。

有没有人知道另一种方法来获得我正在寻找的解决方案？

Answer 1

您并没有真正利用引导网格系统。您可以轻松地重写您必须支持它的内容，而不必求助于position:absolute。

首先，您正在创建自己的容器，引导程序已经为您制作了一些 .span 类，您可以根据自己的喜好使用它们，因此您可以像这样使用它们重写您的标记：

HTML

<div class="container">
  <div class="row">
    <div class="span4">
      ....
    </div>
    <div class="span4">
      ....
   </div>
    <div class="social_icons span4">
      ....
    </div>
  </div>
</div>

然后，您只需使用自己的类定位 span 容器即可轻松设置社交图标的样式。

Demo

Answer 2

如果我理解正确的话，你真正想要做的是将容器 div secondWrapper 设置为 position: relative，然后将内部 div social_icons div 设置为 position:absolute。

我在您的示例中看不到任何定位，但是如果您想使用包含定位的当前代码版本来编辑您的问题，那么我会看看。

这是您正在寻找的东西吗？ http://jsfiddle.net/dannymcc/tXFTt/1/embedded/result/

如果是这样，请查看代码 http://jsfiddle.net/dannymcc/tXFTt/1/

而不是使用我使用过的每个按钮类 :nth-child(1) 因为您为每个按钮使用了相同的类。

我还为第三个 div 设置了一个高度，一旦你完成了字体更改等，可能需要更改它。

如果您使用 Twitter 引导程序或类似工具，可能会有更好的方法来执行此操作。这只是完成它的一种快速而肮脏的方式。