图像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属性应用于该包装器。 将最后一个值（基本柔度）调整为所需的“列”宽度。

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

您可以将图像在该空间中居中放置空白。

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;

最好的祝福，

Brhaka