如何对齐图像旁边的文本而不将其放在图像正下方的新列中[重复]答案

【问题标题】：How to align the text next to the image without it going in a new column right under the image [duplicate]如何对齐图像旁边的文本而不将其放在图像正下方的新列中[重复]
【发布时间】：2021-09-06 05:22:21
【问题描述】：

我的目标是对齐图片旁边的文字！我已经尝试应用 vertical-align:top; 并且它非常有效，但是在您添加更多文本之后，其中一些文本停留在图像旁边的顶部，其余的则落在下面图片。我尝试过使用一堆 div，但都没有帮助。

这是我页面的图片：

HTML 和 CSS：

body {
    margin: 3px;
    padding: 3px;
    background-color: #eeeeee;
}
h1, h5 {
    padding: 10px;
    margin: 0;
}

.pre-header {
    text-align: center;
}

#header-content1-1 {
    font-size: 1.15em;
}

img {
    vertical-align: top;
}

<!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">
    <meta name="description" content="Find out who was Avicii!">
    <link rel="stylesheet" href="style.css">
    <title>David</title>
</head>
<body>
    <header>
    <div class="pre-header">
        <h1 id="header-content1">Avicii - Tim Bergling</h1>
        <h5 id="header-content1-1">Swedish DJ, remixer, record producer, musician, and songwriter</h5>
    </div>
    </header>
<main>
    <hr>
    <img src="https://i.imgur.com/BX2PS5b.jpeg" alt="Image of Avicii">
    <span> this is the textdot oixjf iodfjdoi ndsjfnsjdkf ndsjknf kjdsnf kjdsnfkj sdnfkj nsdjkf nsdjkf ndskjfn kjdsnf jksdnfjk nsdkjf ndsjkfn dskjfn kjsdnf kjdsnfkj dsnfkj ndsjkfn dsjkf ndsjkfn dkjsfn kjdsnf jkdsnf kjdsnf kjdsnfkj dsnkjfn dsjkfndskjfndsjknfjkdsfnjkds nf kjsdnfkjdsnfk</span>
</main>

<footer>

</footer>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

    .pre-header{
      text-align: center;
    }
      .container {
        display: flex;
        align-items: center;
        justify-content: center
      }
      img {
        max-width: 100%
      }
      .image {
        flex-basis: 40%
      }
      .text {
        top: 0;
        font-size: 20px;
        padding-left: 1%;
      }

<!DOCTYPE html>
<html>
  <head>
    <title>David</title>
    <title>The title of the document</title>
  </head>
  <body>
    <div class="pre-header">
      <h1 id="header-content1">Avicii - Tim Bergling</h1>
      <h5 id="header-content1-1">Swedish DJ, remixer, record producer, musician, and songwriter</h5>
      <hr>
    </div>
    <div class="container">
      <div class="image">
        <img src="avicii.jpg" alt="Image of Avicii">
      </div>
      <div class="text">
        <span> this is the textdot oixjf iodfjdoi ndsjfnsjdkf ndsjknf kjdsnf kjdsnfkj sdnfkj nsdjkf nsdjkf ndskjfn kjdsnf jksdnfjk nsdkjf ndsjkfn dskjfn kjsdnf kjdsnfkj dsnfkj ndsjkfn dsjkf ndsjkfn dkjsfn kjdsnf jkdsnf kjdsnf kjdsnfkj dsnkjfn dsjkfndskjfndsjknfjkdsfnjkds nf kjsdnfkjdsnfk</span>
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

这是我推荐使用浮动的剩下的一个地方。

body {
    margin: 3px;
    padding: 3px;
    background-color: #eeeeee;
}
h1, h5 {
    padding: 10px;
    margin: 0;
}

.pre-header {
    text-align: center;
}

#header-content1-1 {
    font-size: 1.15em;
}

img.float-left {
    float: left;
}

<!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">
    <meta name="description" content="Find out who was Avicii!">
    <link rel="stylesheet" href="style.css">
    <title>David</title>
</head>
<body>
    <header>
    <div class="pre-header">
        <h1 id="header-content1">Avicii - Tim Bergling</h1>
        <h5 id="header-content1-1">Swedish DJ, remixer, record producer, musician, and songwriter</h5>
    </div>
    </header>
<main>
    <hr>
    <img class="float-left" src="https://i.imgur.com/BX2PS5b.jpeg" alt="Image of Avicii">
    <span> this is the textdot oixjf iodfjdoi ndsjfnsjdkf ndsjknf kjdsnf kjdsnfkj sdnfkj nsdjkf nsdjkf ndskjfn kjdsnf jksdnfjk nsdkjf ndsjkfn dskjfn kjsdnf kjdsnfkj dsnfkj ndsjkfn dsjkf ndsjkfn dkjsfn kjdsnf jkdsnf kjdsnf kjdsnfkj dsnkjfn dsjkfndskjfndsjknfjkdsfnjkds nf kjsdnfkjdsnfk</span>
</main>

<footer>

</footer>
</body>
</html>

【讨论】：