TailwindCSS-如何制作具有两列的网格，其中第一列的宽度为20%，第二列的宽度为80%？

html5 • • 问答

从官方文档中，我只能想出这样的东西：

<div>
  <div>1st col</div>
  <div>2nd col</div>
</div>

但这给了我 2 列宽度相等 - 我如何指定第一列将是总宽度的 20%（我只需要在那里放置一个简单的图标），其余的宽度将是第二列（这里会有一段文字）？

先感谢您。

回答

设置grid-cols-5为包装器和col-span-4第二列。它将覆盖5/4 (80%)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div>
  <div>1st col</div>
  <div>2nd col</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div>
  <div>1st col</div>
  <div>2nd col</div>
</div>

另一种方式 grid-flow-col

以上是TailwindCSS-如何制作具有两列的网格，其中第一列的宽度为20%，第二列的宽度为80%？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>