CSS / Bootstrap, чтобы обернуть текст на стороне округленного изображения

Question

У меня есть этот код ниже, который показывает имя пользователя и местоположение. Я хочу обернуть текст под именем пользователя, но на стороне округленного изображения. Кто-нибудь может мне помочь?

В настоящее время:

Что я хочу:

HTML:

<div class="header">
    <img src="avatar.png" class="img-circle" />
    <a href="user.html" class="publisher-name">Username</a>
    <div class="post-location">
        Location
    </div>
</div>

CSS:

.header {background: #fff;padding: 16px; }
.header img{width: 36px;height: 36px;}
.header a.publisher-name {margin-left: 6px;color: rgba(0,0,0,0.87);font- 
    weight: 500;text-decoration: none;vertical-align: middle;font-family: 
    "Roboto", sans-serif; }
a.publisher-name {margin: 0;}
.post-location { font-size: 12px; margin-top: 0; }

Answer 1

Попробуйте реализовать Flex !

.header {
  background: #fff;
  padding: 16px;
  display: flex;
}

.header img {
  width: 36px;
  height: 36px;
}

.header a.publisher-name {
  margin-left: 6px;
  color: rgba(0, 0, 0, 0.87);
  font- weight: 500;
  text-decoration: none;
  vertical-align: middle;
  font-family:
    "Roboto", sans-serif;
}

a.publisher-name {
  margin: 0;
}

.post-location {
  font-size: 12px;
  margin-top: 0;
}

<div class="header">
  <img src="avatar.png" class="img-circle" />
  <div>
    <a href="user.html" class="publisher-name">Username</a>
    <div class="post-location">
      Location
    </div>
  </div>
</div>

Для этого просто оберните два элемента, которые вы хотите на RHS, в div, чтобы при применении flex он обрабатывал img и div как столбцы!

Подробнее о Flex здесь: Как сделать - двухколонный макет

Answer 2

Измените ваш HTML, чтобы обернуть имя пользователя и местоположение с другим div:

<div class="header">
    <img src="avatar.png" class="img-circle" />
  <div class="wrapper">
    <a href="user.html" class="publisher-name">Username</a>
    <div class="post-location">
        Location
    </div>
  </div>
</div>

Затем удалите поле слева от имени пользователя и добавьте этот CSS для вашего нового класса оболочки:

.wrapper {
  display: inline-block;
  margin-left: 6px;
}

Answer 3

Вам необходимо расположить группы по вертикали или по горизонтали вместе, а не по горизонтали и вертикали! - tag img - tag a и div tag => редактировать макет каждой группы.