Позиционирование HTML элементов в CSS Tailwind

Позиционирование HTML элементов в CSS Tailwind

01.03.2020 07:56:45 Просмотров 13 Источник

Я пытаюсь узнать tailwind-css или я бы сказал, что изучаю css, где я борюсь с положением элементов. Работа над компонентами Vue js.

До сих пор я добился проектирования лишь нескольких элементов:

Home screen

feature page

banner page

description

Я хочу добавить некоторые формы или конструкции внутри области banner/dark-blue, а затем добавить какой-то виджет-окно внутри нее. Мой код выглядит примерно так:

<div class="bg-white block">
    <nav-bar></nav-bar>
    <div class="hidden md:block w-2/5 top-0 left-0">
        <img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
    </div>
    <div class="hidden md:block">
        <img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
    </div>
    <div class="block">
        <div class="absolute w-full top-0 pl-12 pr-12 pt-40">
            <slider></slider>
            <div class="flex justify-around">
                <card></card>
                <card></card>
                <card></card>
                <card></card>
            </div>
        </div>
    </div>
    <div class="block">
        <div class="bg-white overlflow-hidden">
            <div class="relative">
                <img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
                <img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
            </div>
        </div>
    </div>
    <feature></feature>
</div>

Для ссылки на код компонентов: https://github.com/nitish1986/sample_website

Мой подход состоял в том, чтобы зафиксировать положение родительского элемента или сделать его относительным, а затем расположить фигуры с абсолютным позиционированием, соответствующим его родительскому элементу, но всякий раз, когда я пытаюсь установить абсолютное положение, фигуры достигают верхней части веб-сайта. Он не принимает соответствующее позиционирование

<div class="bg-white overlflow-hidden">
    <div class="relative">
        <img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
        <img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
    </div>
</div>

Как можно добиться такого позиционирования? Я хочу добиться чего-то подобного:

enter image description here

Любой лучший подход к нему очень приветствуется. Спасибо.

У вопроса есть решение - Посмотреть?

Ответы - Позиционирование HTML элементов в CSS Tailwind / Positioning of HTML elements in Tailwind css

Mario Boss

04.03.2020 10:27:10

Для достижения такого рода сетки вы должны рассмотреть возможность использования гибких классов, предоставляемых Tailwind CSS. Очень хорошее руководство вы можете найти в официальной документации: https://tailwindcss.com/docs/flex/

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

Является ответом!
Nitish Kumar

05.03.2020 08:01:26

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

<div class="bg-white block">
    <nav-bar></nav-bar>
    <div class="hidden md:block w-2/5 top-0 h-auto">
        <img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
    </div>
    <div class="hidden md:block h-auto">
        <img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
    </div>
    <div class="block bg-white h-screen">
        <div class="relative">
            <div class="absolute w-full top-0 pl-12 pr-12 pt-40">
                <slider></slider>
                <div class="flex justify-around">
                    <card></card>
                    <card></card>
                    <card></card>
                    <card></card>
                </div>
            </div>
        </div>
    </div>
    <div class="block mt-48 p-56">
        <div class="p-2 w-full h-100"></div>
    </div>
    <feature></feature>
    <preview></preview>
    <about-us></about-us>
</div>

Поэтому в моем коде я держал пустое место с:

<div class="block mt-48 p-56">
    <div class="p-2 w-full h-100"></div>
</div>

Надеюсь, это кому-то поможет. Спасибо

Закрыть X