html - CSS 标题布局

Question

我是不使用表格来布局网页的新手，所以如果这是一个非常简单的问题，我深表歉意。

我正在尝试为我希望看起来像这样的页面创建标题：

-------------------------------------------
|       | Some big text                   |
|  img  |                                 |
|       | Some smaller text               |
-------------------------------------------

目前我有以下 div，但它没有像我想要的那样底部对齐小文本：

<div style="height:50px;">
    <img src="img.jpg" style="vertical-align:middle; height:100%; float:left"/>
    <div style="vertical-align:top;">BigText</>
    <div style="vertical-align:bottom;">SmallText</div>
</div>

我该怎么做？

谢谢！

Answer 1

对小文本 div使用paddingormargin

<div style="height:50px;">
    <img src="img.jpg" style="vertical-align:middle; height:100%; float:left"/>
    <div style="vertical-align:top;">BigText</>
    <div style="vertical-align:bottom;padding-top:15px;">SmallText</div>
</div>​

演示

Answer 2

我的版本：http: //jsfiddle.net/gT6ze/

或者，您可以使用position:relativefor container div，padding:60px为其设置，并使用position:absolute; top:0; left:0;. 这样div，带有文本的元素也可以通过设置position:absoluteandtop:0和定位在 parent 内部bottom:0。