#html #css #tailwind-css
#HTML #css #tailwind-css
Вопрос:
У меня есть приведенный ниже шаблон, созданный с помощью 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 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.
Как вы можете видеть в примере, опубликованном выше, ширина двух нижних <div>
частей превышает ширину родительского элемента (# 1).
Ответ №1:
Я не уверен, что это именно то, что вы хотели, но посмотрите.
Я думаю, что часть проблемы заключается в том, что flexbox не сможет управлять элементами с фиксированным расположением. Ширина тоже нуждалась в корректировке. Кроме того, вы должны скорее фиксировать положение контейнера, чем каждой отдельной ссылки.
Вы можете использовать что-то подобное, но fixed
элементы обычно находятся за пределами этого контейнера, потому что исправление выводит его из потока страниц.