我已经使用 Blueprint 制作了一个非常简单的页面布局的原型……但是在阅读了绝对与相对定位以及一些关于垂直定位的在线教程之后,我无法让事情按照我认为应该的方式工作.
这是我的html:
<div class="container" id="header">
<div class="span-4" id="logo">
<img src="logo.png" width="150" height="194" />
</div>
<div class="span-20 last" id="title">
<h1 class="big">TITLE</h1>
</div>
</div>
该文档确实包含蓝图 screen.css 文件。
我希望 TITLE 与徽标的底部对齐,实际上这意味着 #header 的底部。
这是我的第一次尝试:
#header {
position: relative;
}
#title {
font-size: 36pt;
position: absolute;
bottom: 0;
}
不出所料,回想起来,这使 TITLE 与#header 的左边缘齐平......但它未能影响标题的垂直定位。所以我得到的结果与我想要的完全相反。
所以我尝试了这个:
#title {
position: relative;
}
#title h1 {
font-size: 36pt;
position: absolute;
bottom: 0;
}
My theory was that this would allign the h1
element with the bottom of the containing div
element...but instead it made TITLE disappear, completely. I guess this means that it's rendering off the visible screen somewhere.
At this point I'm baffled. I'm hoping someone here can point me in the right direction. Thanks!