如何解决对齐图像以适合网站标题的右侧
我目前正在尝试使用Jekyll主题,GitHub Pages创建网站,并且遇到了问题。在我的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>
但这会导致类似的情况:
图片与文字不对齐的地方。我该如何解决这个问题?谢谢。
解决方法
这是通过将所有内容包装在<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。