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

发布于 2025-02-05 06:48:30 字数 817 浏览 2 评论 0原文

如何将图像设置为与文本并肩？这就是我所拥有的，不确定我在做什么错。谢谢你！

.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>

原文

How Do I set an image to be side by side with the text? This is what I have, not sure what I am doing wrong. Thank you!

.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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

杀手六號 2025-02-12 06:48:31

正如 @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.sstatic.net/Nx6Dd.jpg?s=256&g=1" alt="LeeBlackWhite">
</div>

As @m4n0 comment says, use a flexbox.

Your code should look like

.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.sstatic.net/Nx6Dd.jpg?s=256&g=1" alt="LeeBlackWhite">
</div>

回复收藏 0 原文

浅浅 2025-02-12 06:48:31

您需要从两个选择器中删除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>

You'll need to remove the float from both selectors, remove text-align from the text, and in the div, useflexbox to align your HTML components they way that you want.

.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>

回复收藏 0 原文

清音悠歌 2025-02-12 06:48:31

我建议将您的内容放入Divs，以便您可以更好地控制自己的元素。

<!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>

I would suggest putting your content into divs so that you may have more control over your elements.

<!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>

回复收藏 0 原文

~没有更多了~