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

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

或者，您可以对容器 div 使用 position:relative，为其设置 padding:60px，并在其中放置图像 position:absolute；顶部:0；左:0；。这样，带有文本的 div 元素也可以通过设置 position:absolute 和 top:0 和 bottom:0.