对齐图像以适合网站上 header 的右侧

Question

我目前正在尝试使用 Jekyll 主题、GitHub 页面制作网站，但遇到了问题。在我的 index.html 文件中，我想在介绍文字的乘车一侧添加一张我自己的照片。我试过这样做：

---
layout: default
title: stuff
---

<!DOCTYPE html>
<html>
  <head>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>
  </head>
  <div id="PhotoOfMe">
    <img src="picture_of_me" alt="me" style="float: right;" width="150" height="150">
  </div>
  <div class="blurb">
    <h1>Website where keeps his stuff.</h1>
      <p>Currently a student of a bit of everything. <a href="/about">Read more about my life...</a></p>
  </div>
</html>

但这会导致类似的结果：

图片与文字不对齐。我该如何解决这个问题？谢谢

Answer 1

这是通过将其全部包装在 <div> 中并将其样式设置为 display: flex 来完成的。

<div style="display: flex">
  <div class="blurb">
    <h1>Website where keeps his stuff.</h1>
      <p>Currently a student of a bit of everything. <a href="/about">Read more about my life...</a></p>
  </div>
  <div id="PhotoOfMe" style="margin-left:10px">
    <img src="https://images.unsplash.com/photo-1518806118471-f28b20a1d79d" alt="me" width="150" height="150">
  </div>
</div>

对齐图像以适合网站上 header 的右侧

Aligning image to fit the right side of a header on website

html

jekyll

github-pages