Блог

Главная - Вопросы по программированию - Как сделать так, чтобы элемент имел ширину 100%, если он находится в новой строке?

Как сделать так, чтобы элемент имел ширину 100%, если он находится в новой строке?

#html #css #sass #less #tailwind-css

Вопрос:

  1. У меня есть одна строка flex с содержимым flex-wrap
  2. Одна Иконка
  3. Текст, который может быть огромным
  4. И надпись, и кнопка в конце строки

Цель состоит в том, чтобы поместить метку и кнопку в конец строки один раз, когда они перемещаются в новую строку, потому что текст слишком длинный.

Действительно небольшая, но сложная проблема…

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

Скриншот:
введите описание изображения здесь

Комментарии:

1. Вы пробовали w-100 ?

2. Да, затем повторите попытку, и X будет все время находиться в новой строке. даже если текст небольшой

Ответ №1:

Просто добавьте свойство css margin left: auto к метке «Повторить попытку», и вы увидите метку и кнопку в крайнем правом углу поля

Ответ №2:

Добавьте 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/bootstrap@5.1.3/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>
Метки: , ,