Question

我是HTML和CSS的新手。作为课程模块，我必须如下所述对齐以下三张猫图片。然而，我确实难以让他们处于正确的位置。这些图片现在排成一行，但第二张图片必须是“＃34;下面的＃34;一条水平线。

有人可以给我一个如何做到这一点的提示吗？下面你会找到我的目标以及我的代码。

＆＃13;

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

＆＃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;

Answer 1

删除flex，然后align和中心images

＆＃13;

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;

Answer 2

您好，您可以尝试以下代码：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;
}

Answer 3

使用CSS Grid，这种布局变得简单易用：

＆＃13;

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

在HTML / CSS中对齐三个对象

3 个答案: