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>

截屏

我想把那个头像放在最右边的“APP”旁边，但我似乎无法让它工作。

4

2 回答 2

1

您可以在图像容器上使用绝对位置并设置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>

于 2019-02-14T18:30:47.700 回答
0

尝试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>

于 2019-02-14T18:27:42.103 回答