#css #tailwind-css
Вопрос:
Я хочу, чтобы «заголовок» шел сверху.
Хитрость в том, что основной контейнер на самом деле не может измениться.
Возможно ли это?
Мой текущий код выглядит следующим образом:
lt;link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/gt; lt;div class="h-screen"gt; lt;div class="h-full"gt; lt;div class="flex flex-auto overflow-x-auto overflow-y-hidden bg-gray-50 h-full"gt; lt;div class="relative flex flex-col ml-2 my-2 overflow-hidden bg-white rounded-lg shadow bg-gray-200" style="width:300px;min-width: 300px;" gt; lt;div class="text-center font-semibold bg-gray-200 h-4 p-2 text-2xl" style="min-height:3rem" gt;Stufflt;/divgt; lt;div class="flex flex-col overflow-x-hidden overflow-y-auto bg-gray-200 p-2 h-full"gt;lt;/divgt; lt;/divgt; lt;div class="relative flex flex-col ml-2 my-2 overflow-hidden bg-white rounded-lg shadow bg-gray-200" style="width: 300px; min-width: 300px;" gt; lt;div class="text-center font-semibold bg-gray-200 h-4 p-2 text-2xl" style="min-height:3rem" gt;More Stufflt;/divgt; lt;div class="flex flex-col h-full"gt;lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Ответ №1:
Вы могли бы попробовать использовать элемент с position: fixed помощью . Это можно расположить относительно окна просмотра. Например:
lt;div class="fixed top-0 left-0 right-0 z-50 bg-red-500 p-1"gt;Headerlt;/divgt; разместил бы заголовок по всей странице. Этот код может быть размещен в любом месте предоставленного вами кода.
Вам нужно будет установить соответствующее верхнее поле для остальной части страницы, чтобы избежать дублирования содержимого.
Полный пример будет выглядеть так:
lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" referrerpolicy="no-referrer" /gt; lt;div class="h-screen"gt; lt;div class="h-full mt-5"gt; lt;div class="flex flex-auto overflow-x-auto overflow-y-hidden bg-gray-50 h-full"gt; lt;div class="relative flex flex-col ml-2 my-2 overflow-hidden bg-white rounded-lg shadow bg-gray-200" style="width:300px;min-width: 300px;"gt; lt;div class="text-center font-semibold bg-gray-200 h-4 p-2 text-2xl" style="min-height:3rem"gt;Stufflt;/divgt; lt;div class="flex flex-col overflow-x-hidden overflow-y-auto bg-gray-200 p-2 h-full"gt;lt;/divgt; lt;/divgt; lt;div class="relative flex flex-col ml-2 my-2 overflow-hidden bg-white rounded-lg shadow bg-gray-200" style="width: 300px; min-width: 300px;"gt; lt;div class="text-center font-semibold bg-gray-200 h-4 p-2 text-2xl" style="min-height:3rem"gt;More Stufflt;/divgt; lt;div class="flex flex-col h-full"gt;lt;/divgt; lt;div class="fixed top-0 left-0 right-0 z-50 bg-red-500 p-1"gt;Headerlt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt;