首页 > 其他分享 >Tailwind CSS Grid

Tailwind CSS Grid

时间:2024-03-12 20:33:31浏览次数:22  
标签:02 显示 06 05 Tailwind Grid 模块 权限 CSS

今天碰到一个问题,就是工作台,要根据权限来自动显示有权限的模块。

一开始是纵向的,导致一些问题,也就是说01,05,09显示一列,02,06显示一列。

如果02,06有权限的话,显示的是左边空的,右边显示出来,怪怪的。

 

现在要让模块02,06,比如还多一个05,模块显示,那么就是02,06,05,按顺序,显示出来,那就是02,06一行,然后换行,05显示在最左边。

css:

<div class="grid grid-cols-2 gap-4">
  <div class="...">02</div>
  <div class="...">06</div>
  <div class="...">05</div>
</div>

上面的css,就是我们想要的结果。

 

下面是用grid来展示的一行四列的情况,那么后空,前空4。

 参考:

https://preline.co/docs/grid.html 

标签:02,显示,06,05,Tailwind,Grid,模块,权限,CSS
From: https://www.cnblogs.com/jiduoduo/p/18069211

相关文章

  • 学习CSS
                                          基础认知CSS的介绍CSS:全称:CascadingStyleSheets,中文译为:层叠样式表CSS的作用:给页面的HTML标签设置样式                                    基......
  • wpf datagrid row background color alternatively changed based on row index,Alter
    <Windowx:Class="WpfApp7.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.c......
  • 最常用的CSS
    补充:书写规范:选择器后面要有空格其他直接看:CSS按钮|菜鸟教程(it028.com)www.it028.com/index.htm CSS使用方式:三种1內部式 2行内式:直接在标签中的style属性中写 3外部样式表:通过link标签引入权重大小很明显,越近权重越大:行内>内部>外部引入 CSS三大特性:层叠......
  • cxGrid图表的使用
    官方示例效果一、图表和数据多标签效果 二、自定义图表和选择图表类型(Border是否显示边线) 三、图表标题(Alignment文字对齐方式,Position标题相对图表的位置,上方、左方、右方、下方) 四、是否透明标注边框,选择透明后没有边框和白色底色  五、鼠标移动上去聚焦选中 ......
  • CSS鼠标样式(cursor)
    一、CSScursor基本语法cursor属性是什么:指鼠标指针放在一个元素边界范围内时所呈现的光标形状,它包括问号,小手等形状。使用时可以在任何你想要添加的标签里,插入style="cursor:某属性值",也可以在CSS样式中添加。比如:pointer,小手形状help,帮助形状。cursor的属性值有十几种可选......
  • 规则七:避免css表达式
    当页面动态变化时,对于各种事件,例如改变大小,滚动和鼠标移动。这些都会发送请求进行求值,这样就导致了求值进行的非常繁琐。如何避免:使用一次性表达式:将值设置成为固定值,去除css表达式使用事件处理器:这样可以避免在无关事件发生时对表达式的求值。  ......
  • 学习unigui【23】uniDBGrid的使用摘要
    Unidbgrid自动调整列宽UniDBGrid1->ClientEvents->ExtEvents[Ext.data.Store[store]]addstore.loadfn:functionstore.load(sender,records,successful,eOpts){sender.grid.columnManager.columns.forEach(function(col){col.autoSize()})}UniDBGrid1.......
  • grid
    .grid-container{margin:auto;display:grid;grid-gap:1px;border:1pxsolid#5e5e5b;width:400px;height:190px;background-color:#5e5e5b;}.grid-item{display:flex;justify-content:center;align-items:center;background-......
  • css滤镜图片的原样生成
    现在需要对一个复杂滤镜的图片进行保存,使这个图片能保留滤镜的效果。原理很简单,就是在原来image的基础上,新建一个canvas,然后增加滤镜效果,画出这个图片,最后保存这个图片到本地。js代码简单版本(未实现批量)`ApplyFiltertoImage<script>constoriginalImage=document......
  • VB.NET 在DataGridview 动态添加下拉列表控件DataGridViewComboBoxColumn要点两次才可
     DataGridview属性EditMode设为EditOnEnter 添加如下事件代码PrivateSubdgvZhiJianXiangMu_CellClick(ByValsenderAsSystem.Object,ByValeAsSystem.Windows.Forms.DataGridViewCellEventArgs)HandlesdgvZhiJianXiangMu.CellClickIfe.ColumnIndex>=0AndAls......