css - 底部对齐 - 响应式布局

Question

我有一个对齐问题。我正在使用 twitter bootstrap 构建这个响应式网站，我的客户希望我将来自两个不同跨度的一些内容对齐底部，如下所示：

他希望右侧 span4 右侧的灰色框与另一个 span4 左侧的 flexSlider 底部对齐。如何做到这一点？我不能在右侧使用边距，因为上部内容是动态的并且可以更长。我尝试使用相对定位的包装器并绝对定位它，但是当尝试将浏览器窗口调整为更小的尺寸时，灰色框的宽度和一切都变得一团糟......除了绝对定位之外还有其他方法吗？

这是标记：

               <div class="span8">
                    <div class="row section professionIntro">
                        <div class="span4">
                            <div class="flexslider section">
                                  <ul class="slides">
                                    <li>
                                      <img src="img/slide1.png" alt="slide 1" />
                                    </li>
                                    <li>
                                      <img src="img/slide2.png" alt="slide 2" />
                                    </li>
                                    <li>
                                      <img src="img/slide3.png" alt="slide 3" />
                                    </li>
                                  </ul>
                            </div>
                        </div>
                        <div class="span4">
                            <p class="intro">Som dataingeniør jobber du med systemutvikling og drift av maskiner eller systemer.</p>
                            <ul class="infoExpand">
                                <li class="expandVideo">
                                    <h2 class="videoSign">Video dataingeniøren hverdag</h2>   
                               </li>
                            </ul>
                        </div>    
                    </div>

感谢任何帮助..

Answer 1

添加 css 响应式：

http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css

如果是按钮位置：绝对是转换位置：静态；

.videoSign {
    position : static;
    bottom:auto;
    top:auto;
    left:auto;
    right:auto;
}

示例：http: //jsfiddle.net/sEryj/