浏览器变小时修改CSS浮动行为

Question

我正在尝试使用css和html创建一个漂亮的列表。我想列出一堆有名字和他们照片的人。这样的事情：

我这样做的方法是将每个元素浮动到左边，然后为标题设置一个小边距，以便使间距正确。问题是当浏览器压缩到名称和图像无法放在同一行上时，它会将图像移动到标题上方。

我想要它做的是将姓氏放在名字下面，这样名字和照片仍然可以对齐。我怎么能这样做？

Answer 1

这应该可行，缩小屏幕会自动限制文本的宽度并使其自动换行。我们能看到代码示例吗？

这是一个工作小提琴：https://jsfiddle.net/bb3a5wbu/

HTML

<div class="image"></div>
<p class="name">FirstName LastName</p>

CSS

.image {
    width: 75px;
    height: 75px;
    background: grey;
    float: left;
}

.name {
    margin-left: 90px;
}

希望这有帮助。