DIV要素の2つの要素をボトムアラインする方法は？

Question

私は現在、2つのボトムアライメントされたセルがあるテーブルでこれを行っています。私はテーブルソリューションで大丈夫ですが、これが可能であるかどうか疑問に思っています（ちょうどCSSとHTML、JavaScriptはありません）。

要件：
*テキストと画像のサイズは不明ですが、2つの合計幅は含まれている要素の幅を超えません。 （例えば、後で画像やテキストを変更したい場合は、ccsファイルにダイビングしたくない）
*画像は左に揃えられ、テキスト（実際には横のリスト）は右に揃えられます。

編集：コスに応答して、テキストと画像の

• サイズは動的であり、それは高さまたは幅が、二つの要素の組み合わせ幅ことを超えません収容要素の幅。
  
• 画像とテキストのボトムアライメントを合わせる必要があります。
  
• この要素は、最も高い要素にしっかりとフィットする必要があります。

Answer 1

HTML

<div class="wrapper"> 
    <img src="" class="image" /> 
    <p class="text">Hello world!</p> 
</div> 

CSS

.wrapper { 
    position: relative; 
    width: 500px; 
} 

.image { 
    position: absolute; 
    display: block; 
    left:0; 
    bottom: 0; 
} 

.text { 
    position: absolute; 
    right:0; 
    bottom: 0; 
} 

EDIT：私は、適切なHTMLコードを追加しました。

EDIT 2：ラッパーの高さが未知である場合には（唯一の制限は.imageは.textセクションよりも高くなるように常にならないことである）

CSS

.wrapper { 
    position: relative; 
    width: 500px; 
} 
.image { 
    vertical-align: bottom; 
} 

.text { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 

HTML

<div class="wrapper"> 
    <img class="image" src="" /> 
    <p class="text"> 
     Hello world! 
    </p> 
</div> 

Answer 2

<div style="width:400px; overflow:visible; position:relative;"> 
    <img src="#" alt ="#" style="float:left;"/> 
    <p style="position:absolute; bottom:0; float:right;">Lorem Ipsum</p> 
</div> 

Answer 3

これは、私が思うに動作するはずです：

HTMLあなたの説明が十分に明確ではない

<div class="outer"> 
    <img src="" title="" /> 
    <div class="text">Some text </div> 
</div> 

CSS

.outer {display: inline-block; width: 350px; } 
.outer img {float: left;} 
.outer .text {float: right; }