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>
打印页面
上一页
下一页
广告