Html &引用；“关于我”；页面、文本和照片并排放在一个带边框的框中

我想制作一个“关于我”的页面，其中包含一个带有薄边框的框，并固定在页面中心

我需要在框的左半部分有一些文本，在框的右侧有一个图像

我很难用

做到这一点，但它不能按我想要的方式工作。 我该如何解决这个问题

在下面，您可以看到到目前为止我的代码：

大家好！！随机文本。

这就是我得到的，我希望我的文本在顶部，而不是底部。 我想把图像和整个图像缩小

---

您可以

浮动：左

图像，如果它是

元素的子元素，如下所示：

<div style="background-color: white;
  border: 5px solid #3D65A9;
  padding: 50px;
  margin: 20px;">
<h4 style="text-align: left; font-family:'Cinzel'; white-space:pre-line; margine-left: 10px;display: inline-block">
  <img src="Moja-slika.jpg" alt="Moja slika" style="width:30%; float:left;"> Hi everyone!!
Random text.</h4>

</div>

大家好！！
随机文本。

---

但是，清除浮动是一种很好的做法，有关更多信息，请参见此。

只需添加

垂直对齐即可。

大家好！！
随机文本。

大家好！！随机文本。

---

这将使段落位于顶部。然后可以使用边距将其居中。要缩小图像，请添加“高度”和“宽度”属性，并将值设置为所需的大小。

您可以在h4标记中使用“绝对位置”：

     <div
      style="background-color: white;
  border: 5px solid #3D65A9;
  padding: 50px;
  margin: 20px;position: relative;"
    >
    <img src="img/amorgos.webp" alt="Moja slika" style="width:30%" />

      <h4
        style="text-align: left; font-family:'Cinzel'; white-space:pre-line;display: inline-block;position: absolute;
        top: 29px;
        margin: 0;"
      >
        Hi everyone!! Random text.
      </h4>
    </div>

大家好！！随机文本。

在这段代码中，您可以看到所需布局的示例

• img应该有一个包裹它的div
• 不要放置内联样式。相反，使用类
• 我向你推荐这个有趣的网站
• 其次，学习是非常有用的

。关于包装器{
背景色：白色；
边框：5px实心#3D65A9；
宽度：400px；
高度：150像素；
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
柔性包装：包装；
填充：10px；
}
.about__图像-包装器{
宽度：25%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.关于__图像{
宽度：100%；
高度：自动；
}
.关于uu文本{
宽度：65%；
}

随机文本随机文本随机文本随机文本随机文本随机文本随机文本随机文本随机文本

您是否尝试了

垂直对齐

属性？检查其中一个答案是否解决了您的问题，将实际答案标记为已解决，不要编辑要解决的问题的标题。您好@Misterogy，尽管它不在您的问题中，但我建议您将样式放在类中，而不是内联。它将帮助您组织代码，并使将来的更改更容易、更快。我给出了一个答案。嗨，是的，我知道这一点，但我尽量避免使用类和函数，因为我不知道如何正确使用它们。这很有效。现在，我如何在照片和文本之间留出一个小的空间，因为它太近了？是的，我尝试过使用float，但它以前不起作用。耶，这取决于你在哪里应用了float，看看我链接的文章，它解释了一点。谢谢。它不像我想的那样工作。但是谢谢。我找到了解决办法。不是用正确的方法，但是谢谢你。我找到了解决办法。看起来不错。谢谢

<div style="background-color: white; border: 5px solid #3D65A9; padding: 50px; 
  margin: 20px;">
     <h4 style="text-align: left; font-family:'Cinzel'; white-space:pre-line; 
      margine-left: 10px;display: inline-block; float:right">
        Hi everyone!! Random text.
     </h4>
   <img src="Moja-slika.jpg" alt="Moja slika" style="float:left" width="100" height="100">
 </div>

     <div
      style="background-color: white;
  border: 5px solid #3D65A9;
  padding: 50px;
  margin: 20px;position: relative;"
    >
    <img src="img/amorgos.webp" alt="Moja slika" style="width:30%" />

      <h4
        style="text-align: left; font-family:'Cinzel'; white-space:pre-line;display: inline-block;position: absolute;
        top: 29px;
        margin: 0;"
      >
        Hi everyone!! Random text.
      </h4>
    </div>