1

テーブルを使用せずに Web ページをレイアウトするのは初めてなので、これが本当に単純な質問である場合は申し訳ありません。

次のようなページのヘッダーを作成しようとしています。

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

どうすればいいですか？

ありがとう！

4

2 に答える 2

0

小さいテキスト div にはpaddingorを使用します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>​

デモ

于 2012-09-05T13:35:51.927 に答える
0

私のバージョン: http://jsfiddle.net/gT6ze/

position:relativeまたは、 for containerを使用して、それdivを設定padding:60pxし、 でその中に画像を配置することもできますposition:absolute; top:0; left:0;。このように、テキストを含む要素は、 とおよびdivを設定することにより、親の内側に配置することもできます。position:absolutetop:0bottom:0

于 2012-09-05T13:37:23.007 に答える