gpt4 book ai didi

html - 在 HTML/CSS 中对齐三个对象

转载 作者:行者123 更新时间:2023-11-28 02:31:38 25 4
gpt4 key购买 nike

我是 HTML 和 CSS 的新手。作为类(class)模块,我必须按如下所述对齐以下三张猫图片。然而,我确实很难让它们处于正确的位置。图片现在排成一行,但第二张图片必须稍微“低于”水平线。

有人可以提示我如何执行此操作吗?您可以在下面找到我的目标结果以及我的代码。

enter image description here

body {
background-color: white;
}

.box-wrap {
display: flex;
}

#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}

#cat2 {
border: 3px solid grey;
position: relative;
display: inline-block;
}

#cat3 {
border: 3px solid orange;
position: relative;
display: inline-block;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cats</title>
</head>
<body>
<div class="box wrap">
<div id="cat1"><img src="images/kitty1_150x150.jpg">
</div>
<div id="cat2"><img src="images/kitty3_150x150.jpg">
</div>
<div id="cat3"><img src="images/kitty2_150x150.jpg">
</div>
</div>
</body>
</html>

最佳答案

使用 CSS 网格,此布局变得简单易维护:

.grid {
display: grid;
justify-content: space-between;
}

#cat2 {
grid-row-start: 2;
grid-column-start: 2;
}

#cat3 {
grid-column-start: 3;
}
<div class="grid">
<div id="cat1">
<img src="https://placekitten.com/120/120" alt="" />
</div>
<div id="cat2">
<img src="https://placekitten.com/120/120" alt="" />
</div>
<div id="cat3">
<img src="https://placekitten.com/120/120" alt="" />
</div>
</div>

关于html - 在 HTML/CSS 中对齐三个对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50312872/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com