- 我有一個 flex 行，帶有 flex-wrap 內容
- 一個圖示
- 文字可能很大
- 以及行尾的 Label 和 Button
目標是在移動到新行時將標簽和按鈕放在行尾一次，因為文本太長。
真的很小但很復雜的問題......
<div
role="alert"
className='relative ease-animation max-w-xxs sm:max-w-xs md:max-w-sm lg:max-w-lg w-max shadow-bottom-lg rounded-md1 my-2 px-5 pb-4 flex items-center flex-wrap'
>
<div className="flex w-max mt-4 items-center">
<IconComponent />
<span
className='tracking-extratight'
>
{text}
</span>
</div>
{/* =======>>> Need this div ensure that the THIS DIV is on the right <<<============== */}
<div className="h-3 w-max mt-3 flex-1 " />
<div
className="flex items-center w-auto justify-end self-end ml-3 "
onClick={onCtaClick}
>
<span>
{ctaText}
</span>
<CloseIcon />
</div>
</div>
截屏：
uj5u.com熱心網友回復：
只需將 css 屬性添加margin left: auto到“重試”標簽，您就會在框的最右側看到標簽和按鈕
uj5u.com熱心網友回復：
添加text-end 引導文本對齊
*注意：本示例中的 CSS 僅用于演示目的 *
[role="alert"] {
color:white;
font-weight:bold;
max-width:500px;
float:right;
margin-right:10px;
box-shadow:2px 2px 5px rgba(0,0,0,.5)
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div
role="alert"
class='bg-danger rounded relative w-max shadow-bottom-lg rounded-md1 my-2 px-5 pb-4 flex items-center flex-wrap'
>
<div class="flex w-max mt-4 items-center">
<IconComponent />
<span
className='tracking-extratight'
>
There was an issue blablablablablababla !
</span>
</div>
<div class="h-3 w-max mt-3 flex-1" />
<div
class="flex items-center text-end justify-end self-end ml-3 "
onClick={onCtaClick}
>
<span>
Retry X
</span>
<CloseIcon />
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337339.html
上一篇：HTML邊框未顯示在我的表單中