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

Question

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

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

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

Answer 1

这应该可以正常工作，缩小屏幕会自动限制文本的宽度并使其自动换行。我们可以看一下代码示例吗？

这是一个有效的 fiddle：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;
}

希望对您有所帮助。

Modify CSS float behavior when the browser becomes small