Плавающий текст рядом с изображением 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-based) по ширине, которую вы хотите, чтобы этот «столбец» был.

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