1

divをコンテナの左下に揃えようとしています: ここに画像の説明を入力してください

グリーンは内部の本体コンテナです。黄色はヘッダーdivで、その中にロゴとタイトルがあります。

これで、ロゴ(オレンジのdiv)をに取得した{float:right; width: 30%}ので、内部の画像の幅はdivを超えません。

問題は青いものにあります。オレンジ(画像によって異なります)と同じ高さで、残りのスペースを埋めるようにします。(uが画像で見ることができるように)。また、青いdiv(タイトル)のテキストを左下に揃えたいです。

親子の絶対位置、相対位置、上下の設定をいろいろ試してみました。固定の高さを使用しても機能しますが、divは画像のdivと同じ高さである必要があります。

私はcssについてもっと学ぶので、どんな助けでもいただければ幸いです。

編集:画像の幅はボイラープレートに依存し、画像の寸法は固定されていません。タイトルには、フォーマットされたcss<h1><span>forアイコンが含まれます。

EDIT2:私の現在のコード:http://jsfiddle.net/QxK9U/

4

2 に答える 2

1

画像 div をタイトル div 内にラップすると、画像 div より多くのコンテンツがない限り、タイトル div は同じ高さになります。

<div class="header">
    <div class="title">
        <div class="image"><img src="http://placekitten.com/200/250"></div>
    </div>
</div>

http://jsfiddle.net/Gc5qz/1/

于 2012-10-20T05:35:53.947 に答える
0

このcssプロパティを試しましたか

bottom:0
left:0

アップデート:

   position: relative;
于 2012-10-20T03:52:14.037 に答える