在 Tailwind css 中定位 HTML 元素

Question

我正在嘗試學習tailwind-css或者我會說在我為元素的位置而苦苦掙扎的地方學習css 。 處理Vue js組件。

到目前為止，我已經完成了幾個元素的設計：

我想在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>

怎樣才能達到這個定位？ 我想實現這樣的目標：

任何更好的方法都是最受歡迎的。 謝謝。

Answer 1

我對我的問題做了很多研究工作，我發現我的絕對元素正在占用我所需的所有空間。 我開始知道我必須定義一個空白空間或定義我的絕對元素完全消耗的 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>

希望這可以幫助某人。 謝謝

Answer 2

要實現這種網格，您應該考慮使用 Tailwind CSS 提供的 flex 類。 您可以在官方文檔中找到非常好的指南： https : //tailwindcss.com/docs/flex/

特別嘗試類 .flex-1，它可以允許 flex 項目根據需要增長和縮小，而忽略其初始大小。