Tailwind CSS - 列



Tailwind CSS 的 **Column** 实用程序用于控制元素内的列数。向元素添加 Column 实用程序无需为列生成编写自定义 CSS 代码。

Tailwind CSS 的列类会自动调整宽度以适应指定的列数。甚至,我们也可以通过选择理想的宽度来调整它。

语法

<element class="columns-*"></element>

Tailwind CSS 列类

下面提到的类可用于控制列布局。

CSS 属性
columns-* columns: *;
columns-auto columns: auto;
columns-{3xs-xs} columns: {16-20rem};
columns-sm columns: 24rem;;
columns-md columns: 28rem;
columns-lg columns: 32rem;
columns-{xl-7xl} columns: {36rem-80rem};

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 列类的功能

  • columns-*:Tailwind CSS Columns-{*} 类表示元素内的 **列数**。范围从 **1 到 12**。
  • columns-{3xs-xs}:Tailwind CSS Columns-{3xs-xs} 类表示 **超小** 列,范围从 3xs 到 xs,宽度范围从 **16 到 18rem**。
  • Columns-{xl-7xl}:Tailwind CSS Columns-{xl-7xl} 类表示 **超大** 列,范围从 xl 到 7xl,宽度范围从 **36 到 80 rem**。

Tailwind CSS 列示例

下面的示例将说明 Tailwind CSS 列类。

根据列数添加

以下示例说明了 **Tailwind CSS Columns-*** 类的用法,该类具有 **三** 个列数,这将在元素内创建三个列。

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <p class="text-3xl font-bold"> Tailwind CSS Columns Class </p> <p>Tailwind CSS Columns-* Class</p> <div class="columns-3 gap-6 space-y-4"> <img class="w-full aspect-video" src= "https://tutorialspoint.com/html/images/html-mini-logo.jpg" /> <img class="w-full aspect-auto" src= "https://tutorialspoint.com/html/images/html.jpg" /> <img class="w-full aspect-auto" src= "https://tutorialspoint.com/html/images/html.jpg" /> <img class="w-full aspect-video" src= "https://tutorialspoint.com/html/images/html-mini-logo.jpg" /> <img class="w-full aspect-auto" src= "https://tutorialspoint.com/html/images/html.jpg" /> <img class="w-full aspect-video" src= "https://tutorialspoint.com/html/images/html-mini-logo.jpg" /> </div> </body> </html>

基于宽度的 Tailwind CSS 列类

以下示例说明了 **Tailwind CSS Columns-3xs** 类的用法,它将根据屏幕尺寸对齐元素。

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <p class="text-3xl font-bold"> Tailwind CSS Columns Class </p> <p>Tailwind CSS Columns-* Class</p> <div class="columns-3xs space-y-4"> <img class="w-full aspect-video" src= "https://tutorialspoint.com/html/images/html-mini-logo.jpg" /> <img class="w-full aspect-auto" src= "https://tutorialspoint.com/html/images/html.jpg" /> <img class="w-full aspect-auto" src= "https://tutorialspoint.com/html/images/html.jpg" /> <img class="w-full aspect-video" src= "https://tutorialspoint.com/html/images/html-mini-logo.jpg" /> <img class="w-full aspect-auto" src= "https://tutorialspoint.com/html/images/html.jpg" /> <img class="w-full aspect-video" src= "https://tutorialspoint.com/html/images/html-mini-logo.jpg" /> </div> </body> </html>
广告