我遇到了对齐问题。我正在使用 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>
感谢任何帮助..
最佳答案
添加 css 响应式:
http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css
如果是按钮position:absolute就是转换position:static;
.videoSign {
position : static;
bottom:auto;
top:auto;
left:auto;
right:auto;
}
关于css - 底部对齐 - 响应式布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12674449/