Tailwind CSS - 佈局

上一頁
下一頁

Tailwind CSS 佈局包含一系列基於重要主題的實用程式類，用於建立有效的佈局。它包含與元素定位、元素浮動、列、Z 索引、容器等相關的主題。

Tailwind CSS 佈局參考

下面提到的主題可用於在元素上建立有效的佈局。

主題 描述 示例
Tailwind CSS - 寬高比 寬高比用於定義元素所需的寬度和高度。
Tailwind CSS - 容器 容器用於在不同的斷點內固定元素的寬度。
Tailwind CSS - 列 Columns 實用程式控制元素內的列數。
Tailwind CSS - 之後換行 之後換行用於強制在元素之後進行列換行或分頁。
Tailwind CSS - 之前換行 之前換行用於強制在元素之前進行列換行或分頁。
Tailwind CSS - 內部換行 內部換行提供了一種方法，用於控制列或頁如何在元素內換行。
Tailwind CSS - 盒子裝飾換行 盒子裝飾換行演示了當元素被分割時，裝飾屬性如何在多行、多列或多頁上呈現。
Tailwind CSS - 盒子大小 盒子大小定義了元素的寬度和高度如何計算為元素的總大小。
Tailwind CSS - 顯示 顯示用於確定元素如何在文件中顯示。
Tailwind CSS - 浮動 浮動用於控制元素或內容的流程。
Tailwind CSS - 清除浮動 清除浮動用於控制內容圍繞元素的環繞方式。
Tailwind CSS - 隔離 隔離用於顯式建立新的堆疊上下文。
Tailwind CSS - 物件適應 物件適應用於調整影像或影片在其容器中的大小。
Tailwind CSS - 物件位置 物件位置用於在容器內定位物件。
Tailwind CSS - 溢位 溢位用於處理過大的內容。
Tailwind CSS - 滾動行為 滾動行為用於處理元素的溢位行為。
Tailwind CSS - 位置 位置用於在文件物件模型中對齊元素。
Tailwind CSS - 上/右/下/左 頂部/右側/底部/左側用於對齊定位元素。
Tailwind CSS - 可見性 可見性用於控制元素的可見性。
Tailwind CSS - Z軸索引 Z軸索引用於控制元素的堆疊順序。

Tailwind CSS佈局示例

下面的示例將簡要介紹佈局類。

示例1

在下面的示例中，我們將介紹上面提到的部分類。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
    <h1 class="text-2xl">
        Tailwind CSS Display- Inline-Block and Floats Class
    </h1>
    <h2 class="text-xl my-2
                text-violet-600">
        Display - Inline-block
    </h2>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-blue-700">
        Inline-Block 1
    </li>
    <li class="inline-block  h-12  w-32
                border-2 rounded p-1 
                border-rose-700">
        Inline-Block 2
    </li>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-fuchsia-700">
        Inline-Block 3
    </li>
    <h2 class="text-xl my-2 float-ri
                text-violet-600">
        Float Class On Inline-Block 
    </h2>
    
    <p>
        In this example we have used we have Float-right
        property with inline-block element which floated 
        those element in the right.
    </p>
    
    <div class="float-right mt-3">
        <li class="inline-block h-12  w-32
                    border-2 rounded p-1 
                    border-blue-700">
        Inline-Block 1
    </li>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-rose-700">
        Inline-Block 2
    </li>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-fuchsia-700">
        Inline-Block 3
    </li>
    </div>
</body>

</html>

示例2

在下面的示例中，我們將介紹Tailwind CSS的Right-0和Visibility類。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-3xl">
        Tailwind CSS Right-0 Class
    </h1>
    <div class="relative h-28 w-28 
                bg-lime-300 m-4">
        <div class="absolute right-0 
                    w-9 h-9 bg-lime-700"></div>
    </div>
    
    <h2 class="text-2xl">
        Tailwind CSS Visibility class
    </h2>
    <p>
        In the following example Invisible class is 
        applied to the inner div which will hide it
        but it will take its space in the layout.
    </p>
    <div class="relative h-28 w-28 
                bg-lime-300 m-4">
        <div class="absolute right-0 invisible
                    w-9 h-9 bg-lime-700"></div>
    </div>
</body>
</html>
列印頁面
上一頁
下一頁
廣告