Как сделать резюме Заголовок (HTML)

Вы можете сделать это с помощью CSS довольно легко, используя правильно структурированный HTML:

HTML:

<div id="bio-intro">
    <div id="img-container">
        <img src="" alt="treybake Frontend Developer" />
    </div>
    <div id="bio-info">
        <h1>TreyBake</h1>
        <h3>Frontend Developer</h3>
    </div>
    <div id="bio-contact">
        <p>
            e: someemail@domain.com <br/>
            t: 0112233445566<br/>
            w: domain.com
        </p>
    </div>
</div>

CSS:

#bio-intro {
  background: lightgray;
  width: 100%
}

#img-container, #bio-info, #bio-contact {
  display: inline-block;
  width: 33%
}

#img-container {
  border: 1px solid;
  border-radius: 100%;
  max-width: 150px
}

Мы по существу разбиваем каждый столбец в свой собственный контейнер. Мы устанавливаем эти контейнеры на 1/3 родительской ширины и устанавливаем отображение на inline-flex, чтобы создать строку. Все остальное - простой CSS для создания изображения с рамкой (без изображения, следовательно, вы видите значение атрибута ALT на изображении - замените его на изображение, и вы увидите намного лучший результат).

Рабочий пример

Я рекомендую flex-box.

Вы можете назначить «display: flex» элементу, внутри которого находятся все ваши дочерние элементы, т. Е. Все элементы, которые вы пытаетесь выровнять в соответствии с вашими требованиями.

Оттуда, flex-box предоставляет множество других функций, которые вы можете изучить здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flex-box не только прост в реализации, но и отзывчив. Это может быть не слишком важно в вашем конкретном случае, но нужно учитывать некоторые дополнительные преимущества при разработке элементов.

<li class="flex-container">
    <ul class="flex-item">Your image</ul>
    <ul class="flex-item">Your Name/Title</ul>
    <ul class="flex-item">Your contact</ul>
</li>

.flex-container {
  display: flex;
  justify-content: space-between;
}

https://jsfiddle.net/snehansh/fm3etpsu/5/