在屏幕顶部添加 3 个徽标

Question

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

Answer 1

您可以使用 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>

Answer 2

首先，欢迎来到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)

在屏幕顶部添加 3 个徽标

Adding 3 Logos at the top of the screen

html

alignment