html - 修改浏览器变小时的 CSS float 行为

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 6 年前。

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

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

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

最佳答案

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

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

希望这对您有所帮助。

关于html - 修改浏览器变小时的 CSS float 行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40310601/

相关文章：

javascript - 使用 jQuery 获取表格行值