Как вы положили div вправо - PullRequest
Новая
       14

Как вы положили div вправо

0 голосов
/ 14 февраля 2019 

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />

<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
  <h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>

  <div id="profile">
    <img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
  </div>
</header>

Screenshot

Я хочу поместить этот аватар справа от «APP» в крайнем правом углу, но яне могу заставить его работать.

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Вы можете использовать абсолютную позицию на контейнере изображения и установить right на 1rem или подобное.Атрибут right определяет, как далеко справа должен располагаться элемент.(Но есть много других способов сделать это) 

header {
  position: relative;
}

#profile {
  position: absolute;
  right: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />

<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
  <h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>

  <div id="profile">
    <img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
  </div>
</header>
0 голосов
/ 14 февраля 2019

Попробуйте использовать margin-left:auto; margin-right:0; на <div id="profile">

#profile{
  margin-left: auto;
  margin-right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />

<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
  <h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>

  <div id="profile">
    <img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
  </div>
</header>
...