TailwindCSS — исправлена полная ширина div родителя flex

У меня есть шаблон ниже, созданный с помощью TailwindCSS:

<body class = "h-full">
  <div class = "flex h-full">
    <div class = "w-5/6">
      <div class = "grid grid-rows-2 grid-flow-col h-full" style = "grid-template-rows: 93.8% 6.2%;">
        <div class = "relative bg-gray-200 h-full">1</div>
        <div class = "bg-red-200">

            <!-- This area is where I have problems -->
            <div class = "flex h-full">
              <div class = "w-1/2 h-full">
                <div class = "bg-blue-500 h-full fixed" style = "width: inherit;">Link #1</div>
              </div>
              <div class = "w-1/2 h-full">
                <div class = "bg-green-500 h-full fixed" style = "width: inherit;">Link #2</div>
              </div>
            </div>

        </div>
      </div>
    </div>
    <div class = "w-1/6">
    <div class = "grid grid-rows-2 grid-flow-col h-full" style = "grid-template-rows: 20% 80%;">
                <div class = "md:py-16 md:px-4 border-l border-gray-100 bg-gray-50">3
                </div>
                <div class = "md:py-4 md:px-4 border-l border-t border-gray-100">4</div>
          </div>
    </div>
  </div>
</body>

Пожалуйста, смотрите следующую скрипту, которую я создал здесь.

У меня проблема с этими двумя div:

<div class = "flex h-full">
    <div class = "w-1/2 h-full">
         <div class = "bg-blue-500 h-full fixed" style = "width: inherit;">Link #1</div>
    </div>
    <div class = "w-1/2 h-full">
         <div class = "bg-green-500 h-full fixed" style = "width: inherit;">Link #2</div>
   </div>
</div>

Я хочу иметь две ссылки внизу (ссылка № 1 и ссылка № 2 в моем примере) с фиксированной позицией. Ширина каждой ссылки должна занимать 50% родительского блока.

Как вы можете видеть в приведенном выше примере, ширина двух нижних частей <div> превышает ширину родителя (# 1).

html css tailwind-css

12.12.2020 19:14

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

8 474

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

Ответы 1

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

Я не уверен, что это именно то, что вы хотели, но посмотрите.

Я думаю, что часть проблемы заключается в том, что flexbox не сможет контролировать элементы с фиксированным позиционированием. Ширина тоже нуждалась в корректировке. Также вам лучше зафиксировать положение контейнера, чем каждой отдельной ссылки.

Вы можете использовать что-то подобное, но элементы fixed обычно находятся за пределами этих контейнеров, потому что исправление выводит их из потока страницы.

https://play.tailwindcss.com/YPc9nuhM9z

15.12.2020 09:25