如何在段落的左侧设置图像?

如何设置图像与文本并排?这就是我所拥有的，不确定我做错了什么。谢谢你！

.aboutme {
white-space: normal;
word-wrap: break-word;
font-family: proxima-nova, Times New Roman;
color: rgb(196, 191, 181);
font-weight: 400;
font-size: 18px;
font-style: normal;
text-align: left;
height: auto;
width: auto;
margin: 0;
line-height: 1.7em;
float: right;
}
.homepageimgdef {
max-width: 500px;
height: 500px;
border-radius: 50%;
display: block;
float: left;
}

<div>
<p class="aboutme">
"Paragraph text"
</p>
<img class="homepageimgdef" src="./HomePagePictureBlackWhite.jpg" alt="LeeBlackWhite">
</div>

正如@m4n0评论所说，使用flexbox

你的代码应该看起来像

.aboutme {
white-space: normal;
word-wrap: break-word;
font-family: proxima-nova, Times New Roman;
color: rgb(196, 191, 181);
font-weight: 400;
font-size: 18px;
font-style: normal;
text-align: left;
height: auto;
width: auto;
margin: 0;
line-height: 1.7em;
}
.homepageimgdef {
max-width: 500px;
height: 500px;
border-radius: 50%;
}
.my-flex-box {
display: flex;
align-items: center; /**remove this if you want to make the text start at the top**/
}

<div class="my-flex-box">
<p class="aboutme">
"Paragraph text"
</p>
<img class="homepageimgdef" src="https://i.stack.imgur.com/Nx6Dd.jpg?s=256&g=1" alt="LeeBlackWhite">
</div>

您需要从两个选择器中删除float，从文本中删除text-align，并在div中使用flexbox来对齐您的HTML组件。

.img-and-text {
display: flex;
}
.aboutme {
white-space: normal;
word-wrap: break-word;
font-family: proxima-nova, Times New Roman;
color: rgb(196, 191, 181);
font-weight: 400;
font-size: 18px;
font-style: normal;
text-align: left;
height: auto;
width: auto;
margin: 0;
line-height: 1.7em;
}
.homepageimgdef {
max-width: 500px;
height: 500px;
border-radius: 50%;
display: block;
float: left;
}

<div class="img-and-text">
<img class="homepageimgdef" src="https://images.unsplash.com/photo-1648737155328-0c0012cf2f20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=400&q=60" alt="LeeBlackWhite">
<p class="aboutme">
"Paragraph text"
</p>
</div>

我建议把你的内容放到div中，这样你就可以更好地控制你的元素。

<!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>
<style>
.container{
display: flex;
vertical-align: middle;
margin: 0 auto;
justify-content: left;
align-items: center;
gap:10px;
}
</style>
</head>
<body>
<div class="container">
<div>
<img src="./HomePagePictureBlackWhite.jpg" alt="LeeBlackWhite">
</div>
<div>
<p>
"Paragraph text"
</p>
</div>

</div>

</body>
</html>

相关内容

最新更新

热门标签：