我是HTML和CSS的新手。作为课程模块,我必须如下所述对齐以下三张猫图片。然而,我确实难以让他们处于正确的位置。这些图片现在排成一行,但第二张图片必须是“#34;下面的#34;一条水平线。
有人可以给我一个如何做到这一点的提示吗?下面你会找到我的目标以及我的代码。
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>
&#13;
答案 0 :(得分:0)
删除flex
,然后align
和中心images
body {
background-color: white;
}
#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}
#cat2 {
border: 3px solid grey;
position: relative;
display: inline-block;
float:right;
}
#cat3 {
border: 3px solid orange;
position: absolute;
display: inline-block;
top: 25%;
left: 45%;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
您好,您可以尝试以下代码:https://jsfiddle.net/fh86hejs/
shouldComponentUpdate
HTML代码如下
body {
background-color: white;
}
.box-wrap {
display: flex;
justify-content:space-between;
}
#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;
}
.text-center{
text-align:center;
}
答案 2 :(得分:0)
使用CSS Grid,这种布局变得简单易用:
.grid {
display: grid;
justify-content: space-between;
}
#cat2 {
grid-row-start: 2;
grid-column-start: 2;
}
#cat3 {
grid-column-start: 3;
}
&#13;
<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>
&#13;