<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”旁边,但是我似乎无法使其正常工作。
答案 0 :(得分: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>
答案 1 :(得分: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>