CSS网格布局

Question

我想创建一个css布局，如下图所示：

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

我设法让它有点工作，但我无法获取图片旁边的文字，如图所示http://jsfiddle.net/jVwf4/

有关如何获取图像旁边的文字的任何建议吗？

谢谢

Answer 1

您需要翻转<p>和<img>代码的顺序，并为<img>代码提供float: left; css属性。

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

Answer 2

你可以像这样制作你的HTML块：

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