css - CSSグリッドレイアウト

Question

次の画像のようなcssレイアウトを作成したいと思います。

http://i47.tinypic.com/34y4ewk.png

私はそれをなんとか機能させることができましたが、ここに示されているように画像の横にテキストを取得できませんhttp://jsfiddle.net/jVwf4/

画像の横にテキストを表示する方法について何かアドバイスはありますか？

ありがとうございました

Answer 1

<p>タグとタグの順序を逆にして、タグにcss属性<img>を与える必要があります。<img>float: left;

http://jsfiddle.net/wG9uH/5/

Answer 2

次のようにHMTLブロックを作成できます。

<div>
    <p class="title">Cape Town<img width="100" height="75" src="http://www.geonames.org/img/wikipedia/131000/thumb-130255-100.jpg"></p>
</div>

次に、画像を次のように左にフロートさせます。

.title img{
    float: left;
    margin-right: 1em;
}