在屏幕顶部添加 3 个徽标答案

【问题标题】：Adding 3 Logos at the top of the screen在屏幕顶部添加 3 个徽标
【发布时间】：2022-01-07 22:50:18
【问题描述】：

我是 HTML 新手，正在尝试做一个练习项目。我坚持的是在页面顶部添加 3 个徽标，左侧 1 个，中间 1 个，右侧 1 个。我尝试遵循以前的方法，例如使用 float 和 flex 方法，但我要么将所有图像并排放置，要么无法移动它们的位置，或者只能移动一个位置！我该怎么做？

【问题讨论】：

请添加您的 HTML 结构。没有适当的要求就很难调试

标签： html alignment

【解决方案1】：

首先，欢迎来到精彩的 HTML 世界！

这是 HTML

<div class="container">
 <img class="logo" src="yourlogo.png"/>
 <img class="logo" src="yourlogo.png"/>
 <img class="logo" src="yourlogo.png"/>
</div>

还有 CSS...

.container {
 display: flex;
 justify-content: space-between;
 align-items: center
}

我可以给你一些学习 Flexbox 的资源！ Flex 很棒，你可以很轻松地做很多很酷的事情

Flexbox introduction on CSS TRICKS

Flexbox froggy (little game for understanding flex's logic)

【讨论】：

感谢您的资源！是的，它奏效了！我现在只需要编辑图像的大小，以便它们正确定位，谢谢！

【解决方案2】：

您可以使用 flex 和 justify-content 来实现此目的

<!DOCTYPE html>
<html>
<body>

<div style="display:flex; justify-content: space-between">

<img src="https://picsum.photos/100/50" />

<img src="https://picsum.photos/100/50" />

<img src="https://picsum.photos/100/50" />
</div>

</body>
</html>

【讨论】：