css - テキストの横に垂直に配置された動的画像

Question

コンテナーの残りの部分を埋めるテキストの横に、サイズがわからない画像を垂直方向に配置するにはどうすればよいですか?

.image,.text { 
    display: inline-block; 
    vertical-align:middle; 
}

ただし、これは、テキストに幅を設定して、画像が横にスライドする場合にのみ機能します。

.text {
    width: 100% - .image.width();
}

私はjavascriptでこれを行うことができますが、純粋なcssでこれを達成する方法はありますか?

編集：テーブルでこれを達成できました。もっと良い方法はありますか？

テーブルを使用した jsfiddle: http://jsfiddle.net/9Ufgj/ (レイアウトにテーブルを使用するのは好きではありません...)

jsfiddle with inline-block (css のコメントを外します) http://jsfiddle.net/9Ufgj/1/ (画像やコンテナーのサイズを変更してみてください。テキストはコンテナーの残りの幅全体を埋めません)

score 0 · Accepted Answer

画像を左にフロートさせ、テキストをオーバーフロー非表示に設定する必要があります。私の JSFiddle をチェックしてください: http://jsfiddle.net/9Ufgj/2/

img {
    width: 150px; 
    height:150px;
    float: left;
}
p {
    overflow: hidden;
}

.clear {clear: both;}

2 に答える 2