如何解决如何获得标题在同一行?
我无法让“克里斯·法鲁吉亚”和“ 5星”排在同一行。在CodePen中,您会看到我的名字实际上比右边的5星小。
在Tailwind中,如何将这两个放在同一行?
body {
background: #e3e3e3;
padding: 3rem;
}
figure {
margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" rel="stylesheet" />
<figure class="block flex">
<img src="https://unsplash.it/250/175
" class="object-cover w-full rounded-l-lg">
<figcaption class="bg-white p-5">
<div class="text-right">5 Stars</div>
<h3>Chris Farrugia</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,provident cupiditate tempora,aspernatur quos assumenda iure facilis enim velit ea doloremque,odit qui blanditiis asperiores molestias ullam? Quos tempore consequatur nulla,error doloremque
sequi consequuntur cupiditate assumenda labore nihil suscipit!</p>
<a href="#">Read More</a>
</figcaption>
</figure>
解决方法
将float-right
类添加到“ 5星”。
body {
background: #e3e3e3;
padding: 3rem;
}
figure {
margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" rel="stylesheet" />
<figure class="block flex">
<img src="https://unsplash.it/250/175
" class="object-cover w-full rounded-l-lg">
<figcaption class="bg-white p-5">
<div class="text-right float-right">5 Stars</div>
<h3>Chris Farrugia</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,provident cupiditate tempora,aspernatur quos assumenda iure facilis enim velit ea doloremque,odit qui blanditiis asperiores molestias ullam? Quos tempore consequatur nulla,error doloremque
sequi consequuntur cupiditate assumenda labore nihil suscipit!</p>
<a href="#">Read More</a>
</figcaption>
</figure>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。