Tailwind CSS изменяет размер ширины столбца

Я пытаюсь, просто для тренировки, сделать простую карточку, похожую на предварительный просмотр чата WhatsApp. Для этого я использую CSS попутного ветра и сетку. Вот мой код:

<div class = "grid grid-cols-4 w-96 bg-zinc-800 rounded-md">
<div class = "shrink-0 p-3 border-red-800 max-w-fit h-20 border">
    <img src = "./assets/placeholder.png" alt = "" class = "max-h-full rounded-full">
</div>
<div class = "p-3 col-span-2 font-helvetica border-red-800 border">
    <h1 class = "text-neutral-100">Andrea Militano</h1>
    <div class = "flex text-neutral-400">
        <fa-icon [icon] = "faCheck" class = ""></fa-icon>
        <fa-icon [icon] = "faCheck" class = "-translate-x-2"></fa-icon>
        <p class = "text-sm truncate -translate-x-1">Contenuto del messaggio, Contenuto del messaggio, Contenuto del messaggio</p>
    </div>
</div>
<div class = "border-red-800 justify-self-end p-3 border">
    <p class = "text-neutral-400 text-sm">21.23</p>
</div>

и вот результат: Tailwind CSS изменяет размер ширины столбца

Как я могу позволить второму столбцу захватить все пространство, оставшееся от двух других столбцов? Я думал, что с гибким макетом это проще, но я изо всех сил пытаюсь сделать так, чтобы последний элемент div заканчивался внутри границы родительского элемента div. Это гибкий вариант:

<div class = "flex w-96 bg-zinc-800 rounded-md">
<div class = "shrink-0 p-3 border-red-800 max-w-fit h-20 border">
    <img src = "./assets/placeholder.png" alt = "" class = "max-h-full rounded-full">
</div>
<div class = "p-3 font-helvetica border-red-800 border max-w-[65%]">
    <h1 class = "text-neutral-100">Andrea Militano</h1>
        <div class = "flex text-neutral-400">
            <fa-icon [icon] = "faCheck" class = ""></fa-icon>
            <fa-icon [icon] = "faCheck" class = "-translate-x-2"></fa-icon>
            <p class = "text-sm truncate">Message content</p>
        </div>
</div>
<div class = "border-red-800 p-3 border">
    <p class = "text-neutral-400 text-sm">21.23</p>
</div>

With the following result:

Tailwind CSS изменяет размер ширины столбца

Любое предложение?

html css tailwind-css

17.03.2024 23:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

162

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать это, добавив flex-1, чтобы заполнить пустое пространство, и добавив overflow-hidden, чтобы исправить переполнение текста родительским элементом.

<div class = "flex w-96 gap-3 rounded-md bg-zinc-800">
  <div class = "h-20 max-w-fit shrink-0 border border-red-800 p-3">
    <img src = "https://i.pravatar.cc/150?img=3" alt = "" class = "max-h-full rounded-full" />
  </div>
  <div class = "flex-1 font-helvetica border border-red-800 p-3 overflow-hidden">
    <h1 class = "text-neutral-100">Andrea Militano</h1>
    <div class = "flex text-neutral-400">
      <fa-icon [icon] = "faCheck" class = ""></fa-icon>
      <fa-icon [icon] = "faCheck" class = "-translate-x-2"></fa-icon>
      <p class = "truncate text-wrap text-sm">Message content</p>
    </div>
  </div>
  <div class = "border border-red-800 p-3">
    <p class = "text-sm text-neutral-400">21.23</p>
  </div>
</div>

Кроме того, вам придется удалить max-w-[65%], чтобы быть уверенным, что он всегда будет занимать оставшееся место.

— 17.03.2024 23:36

Да, я так думаю

— 17.03.2024 23:38

Единственная проблема заключается в том, что если я помещу больше текста внутри моего <p>, он переполнится родительским элементом.

— 17.03.2024 23:41

Вы можете добавить text-wrap в класс <p>, чтобы перенести текст на новую строку.

— 17.03.2024 23:51

Да, но я просто хочу увидеть одну строку, а затем "...", так как это был предварительный просмотр сообщения.

— 17.03.2024 23:53

добавьте overflow-hidden в ту же часть класса flex-1

— 17.03.2024 23:55