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/

或者，你可以使用position:relative集裝箱div，爲其設置padding:60px，並在其中與position:absolute; top:0; left:0;一起定位圖像。通過設置position:absolute和top:0和bottom:0，這樣div帶文本的元素也可以放置在父項的內部。

Answer 2

使用小文格的padding或margin

<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>​ 

demo