Tailwind CSS - 浮動

Tailwind CSS 浮動是一個用於控制元素或內容浮動的實用程式類。它允許內容向右、向左浮動，或將其對齊在元素的開頭和結尾。

Tailwind CSS 浮動類

以下是Tailwind CSS 浮動類列表，它提供了一種有效的方式來圍繞元素對齊內容。

類名	CSS 屬性
float-start	float: inline-start;
float-end	float: inline-end;
float-right	float: right;
float-left	float: left;
float-none	float: none;

Tailwind CSS 浮動類的功能

float-start: 此類替換 CSS float: inline-start; 屬性。它根據文字方向將元素設定成浮動在內聯起始側。
float-end: 此類替換 CSS float: inline-end; 屬性。它根據文字方向將元素設定成浮動在內聯結束側。
float-right: 此類替換 CSS float: right; 屬性，使元素浮動在其容器的右側。
float-left: 此類替換 CSS float: left; 屬性，使元素浮動在其容器的左側。
float-none: 此類替換 CSS float: none; 屬性，確保元素不會浮動。

Tailwind CSS 浮動類示例

以下示例將說明 Tailwind CSS 浮動類的實用程式。

Tailwind CSS float-start 和 float-end 類

以下示例說明了Tailwind CSS float-start 和 float-end 類的用法。

示例

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3">
    <h2 class="font-bold text-xl">
        Tailwind CSS FLoat-Start & Float-End
    </h2>
    <div class="border-4 
                p-2 mt-4">
        <p>
            <span class="float-start bg-pink-200">
                Float-Start Content
            </span>
            <span class="float-end bg-blue-200">
                Float-End Content
            </span> 
            Content will be floated based on text direction.
        </p>
    </div>

</body>

</html>

Tailwind CSS float-right 類

以下示例說明了Tailwind CSS float-right類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
    <h2 class="font-bold text-xl">
        Tailwind CSS FLoat-Right
    </h2>
    <div class="bg-pink-200  p-3 mt-2">
        <div class="float-right bg-blue-300 p-2">
            Float Right
        </div>
        <p>
            Tailwind CSS is a utility-first CSS framework 
            for designing web pages. "Utility-first" means 
            the framework focuses on providing utility classes. 
            It is a low-level CSS framework that is easy to
            learn and fast to use in the project.
        </p>
    </div>
</body>
</html>

Tailwind CSS float-left 類

以下示例說明了Tailwind CSS float-left類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
    <h2 class="font-bold text-xl">
        Tailwind CSS FLoat-Left
    </h2>
    <div class="bg-pink-200 p-2 mt-2">
        <div class="float-left bg-blue-300 p-2">
            Float Left
        </div>
        <p>
            Tailwind CSS is a utility-first CSS framework 
            for designing web pages. "Utility-first" means 
            the framework focuses on providing utility classes. 
            It is a low-level CSS framework that is easy to
            learn and fast to use in the project.
        </p>
    </div>
</body>
</html>

Tailwind CSS float-none 類

以下示例說明了Tailwind CSS float-none類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
    <h2 class="font-bold text-xl">
        Tailwind CSS FLoat-None
    </h2>
    <div class="bg-pink-200 p-2 mt-2">
        <div class="float-none bg-blue-300 p-2">
            Float None
        </div>
        <p>
            Tailwind CSS is a utility-first CSS framework 
            for designing web pages. "Utility-first" means 
            the framework focuses on providing utility classes. 
            It is a low-level CSS framework that is easy to
            learn and fast to use in the project.
        </p>
    </div>
</body>
</html>

列印頁面