css - CSS 网格布局

Question

我想创建一个如下图所示的 CSS 布局：

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

我已经设法让它工作了，但我无法得到图像旁边的文本，如此处所示http://jsfiddle.net/jVwf4/

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

谢谢

Answer 1

您需要翻转 and 标签的顺序<p>并为标签<img>赋予css 属性。<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;
}