CSS网格布局

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

我已经设法让它的工作排序，但我不能得到文本旁边的图像，如图所示

有没有关于如何在图像旁边显示文本的建议

---

谢谢

您需要翻转

和
标记的顺序，并将
标记设置为
浮动：左css属性

您可以这样制作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;
}