如何使文本在框的右侧可见

Question

所以我制作了一个框，我在其中导入了三张图片，一张在另一张下面。并留下右边的空 space。现在我想把文字放在右边。但是做不到。

.rcorners1 {
  border-radius: 70px;
  /* background: #73ad21; */
  background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?t=st=1652835318~exp=1652835918~hmac=a388e1f2f27925587acc85600e642cc8b312a7e7e4b957e9b73a7b636f7dd68d&w=900);
  padding: 20px;
  /* flex: auto; */
  width: 950px;
  height: 250px;
}

.rcorners2 {
  border-radius: 25px;
  background: white;
  border: 1px solid brown;
  /* border: brown; */
  /* background-image: url(./images/Background.jpg); */
  padding: 20px;
  /* float: none; */
  /* position: absolute; */
  margin-top: -150px;
  /* flex: auto; */
  width: 800px;
  height: 400px;
}

.text {
  color: white;
}


/* .leftWrapper {
  float: left;
  width: 32%;
  height: 650px;
} */

.container {
  position: relative;
  /* margin-left: 200px; */
}

.image1 {
  position: relative;
  width: 200px;
  padding: auto;
  height: 300px;
  margin: 1px;
  /* padding: 4px; */
  border: 4px solid white;
  margin-top: 30px;
  margin-left: -250px;
  outline-style: groove;
  outline-color: brown;
  z-index: 3;
}

.image2 {
  position: absolute;
  border: 4px solid white;
  /* margin-top: -70px; */
  width: 170px;
  height: 260px;
  top: 30px;
  left: 30px;
  /* padding: auto; */
  outline-style: groove;
  outline-color: brown;
  /* outline-width: 12px; */
  /* border: 1px green solid; */
  /* margin-bottom: 38px; */
  margin-top: 20px;
  margin-left: 150px;
  z-index: 2;
}

.image3 {
  width: 150px;
  /* position: relative; */
  outline-style: groove;
  border: 4px solid white;
  /* outline-color: brown; */
  height: 230px;
  top: 30px;
  left: 30px;
  padding: auto;
  z-index: 3;
  /* margin-top: -50px; */
  margin-bottom: -20px;
  margin-left: 50px;
}

.h1 {
  /* position: relative; */
  font-size: 40px;
  font-weight: lighter;
  /* margin-top: -50px; */
  text-align: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <center>
    <div class="rcorners1">
      <div class="text">
        <h1>Digital Card Details</h1>
      </div>
    </div>
    <div class="rcorners2">
      <div class="container">
        <img class="image1" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />

        <img class="image2" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />

        <img class="image3" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />
      </div>
      <h1>Hello</h1>
      <!-- <a href=""></a> -->
    </div>
  </center>
</body>

</html>

codepen https://codepen.io/mohit-04/pen/abWPwPq

从 URL - Codepen 导入图像时的样子我希望 hello 应该出现在框内的右侧。

保留图像的对齐方式，我只需要在右侧做文字。如果我必须在那里做多个文本怎么办。也喜欢 h1、p 和照片

Answer 1

您可以创建一个包含所有文本的 div 并设置其 position:absolute ；然后使用 right 和 top 属性根据需要定位它.

.rcorners1 {
  border-radius: 70px;
  /* background: #73ad21; */
  background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?t=st=1652835318~exp=1652835918~hmac=a388e1f2f27925587acc85600e642cc8b312a7e7e4b957e9b73a7b636f7dd68d&w=900);
  padding: 20px;
  /* flex: auto; */
  width: 950px;
  height: 250px;
}

.rcorners2 {
  border-radius: 25px;
  background: white;
  border: 1px solid brown;
  /* border: brown; */
  /* background-image: url(./images/Background.jpg); */
  padding: 20px;
  /* float: none; */
  /* position: absolute; */
  margin-top: -150px;
  /* flex: auto; */
  width: 800px;
  height: 400px;
}

.text {
  color: white;
}

/* .leftWrapper {
  float: left;
  width: 32%;
  height: 650px;
} */

.container {
  position: relative;
}
.image1 {
/*   position: fixed; */
  width: 260px;
  padding: auto;
  height: 380px;
  margin: 1px;
  /* padding: 4px; */
  border: 4px solid white;
  margin-left: -200px;
  outline-style: groove;
  outline-color: brown;
  z-index: 3;
}

.image2 {
  /* position: absolute; */
  border: 4px solid white;
  width: 220px;
  height: 320px;
  top: 30px;
  left: 30px;
  /* padding: auto; */
  outline-style: groove;
  outline-color: brown;
  /* outline-width: 12px; */
  /* border: 1px green solid; */
  margin-bottom: 38px;
  margin-left: -100px;
  z-index: 2;
}

.image3 {
  width: 150px;
  /* position: relative; */
  outline-style: groove;
  border: 4px solid white;
  /* outline-color: brown; */
  height: 220px;
  top: 30px;
  left: 30px;
  padding: auto;
  z-index: 3;
  margin-bottom: 100px;
  margin-left: -100px;
}

.inner-text{
  color:black;
  position:absolute;
  right:0;
  top:50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <center>
    <div class="rcorners1">
      <div class="text">
        <h1>Digital Card Details</h1>
      </div>
    </div>
    <div class="rcorners2">
      <div class="container">
        <img class="image1" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />

        <img class="image2" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />

        <img class="image3" src="https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg" alt="failed" />
        
        <div class="inner-text">
          text here
        </div>
      </div>
      <!-- <a href=""></a> -->
    </div>
  </center>
</body>

</html>

如何使文本在框的右侧可见

How do i make text visible in right side of a box

html

css

alignment

box