html - 如果在新行中，如何使元素的宽度为 100%？

Question

1. 我有一个 flex 行，包含 flex-wrap 内容
2. 一个图标
3. 可能很大的文本
4. 以及行尾的标签和按钮

目标是在移动到新行时将Label和Button放在行尾一次，因为cus文本太长。

真的很小但很复杂的问题...

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

截屏：

标签： htmlcsssasslesstailwind-css

Answer 1

只需将 css 属性添加margin left: auto到“重试”标签，您就会在框的最右侧看到标签和按钮