图像 HTML CSS 旁边的浮动文本

debugcn 发表于 Dev

标记

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

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

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

我现在：

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>

虫子也是人

不涉及浮动。将您的图像放在另一个包装器中。然后将flex属性应用于该包装器。将最后一个值（flex-basis）调整为您希望“列”的宽度。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。