图像旁边的浮动文本 HTML CSS

Question

我正在尝试使文本围绕图像浮动，但出于某种原因，文本不会出现在正确的位置。

这是我想要的样子。我能够自己在编辑器中创建它，但是当我将它添加到我的页面时，它破坏了它并且不起作用。

我很难让它看起来像我的另一个例子。他们对该部分具有相同的代码。需要帮助弄清楚如何让它接近第一个例子。

现在挖矿：

section{
 display:flex;
    border-style:solid;
    background-color:azure;
}

img {
  padding-top: 5em;
  padding-right:2em;
}

p{
float:right;
}

h1{
 text-align:center;
}

<section>
  <img src="images/GM05.png" alt="headshot">
  <article>
     <h1>Name Goes Here.</h1>
     <p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
  </article>
</section>

Answer 1

不涉及花车。将您的图像放在另一个包装器中。然后将 flex 属性应用于该包装器。将最后一个值 (flex-basis) 调整为您希望 "column" 的宽度。

aside {
  flex: 0 0 40%; /* flex-grow: 0; flex-shrink: 0; flex-basis: 40%; */
  padding-top: 64px;
}

您可以将图像居中 space，并留有边距。

aside img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* auto on the sides centers the item */
}

section {
  display: flex;
  border-style: solid;
  background-color: azure;
}

aside {
  flex: 0 0 40%;
  padding-top: 64px;
}

aside img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

<section>
  <aside>
    <img src="https://picsum.photos/200/300" alt="headshot">
  </aside>
  <article>
    <h1>Name Goes Here.</h1>
    <p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae
      risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet
      sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
  </article>
</section>

Answer 2

如果我没理解错的话，你只是想在中心显示这个图像。

因此，将 padding-top: 5em; 更改为 margin: auto;

此致，

布拉卡

图像旁边的浮动文本 HTML CSS

Floating Text Next to An Image HTML CSS

html

css

css-float