页面小模块排列不计数目(最多一行3列),自动居中显示

今天做了一个项目中,要求页面的小模块居中显示,并且最多一行显示3列。这里我研究出了一种做法,不管小模块的数目为1或者2或者3.都可以居中显示。

html部分

<div class=‘content‘>

<div class=‘content-inner‘>

<div class=‘item‘></div>

<div class=‘item‘></div>

<div class=‘item‘></div>

</div>

</div>

css部分

.content{width:1200px;margin:0 auto;text-align:center;overflow:hidden;}
.content-inner{margin-right:-146px;display:inline-block;zoom:1;*display:inline;}
.content .item{width:300px;height:400px;margin:0 146px 45px 0;float:left;background:#fff;border:1px solid #E0E6ED;box-shadow:0 0 60px rgba(13,37,62,.1);}
时间: 2024-11-04 02:37:46

页面小模块排列不计数目(最多一行3列),自动居中显示的相关文章

JPA项目的一个小模块案例

最近在做一个Web项目,找一个小的模块来做笔记,稍微整理下,嗯,入题了 整个项目所用框架大致如下:后台>Struts+Spring+JPA; 前台>jgGrid 下面是整个项目的后台功能逻辑部分: 下面是前台页面展示部分: 这是系统所用到的jar包: 因为用到struts标签所以需要引入一下文件(前面为路径): 1.  b/WebRoot/WEB-INF/struts-bean.tld 2.  b/WebRoot/WEB-INF/struts-html.tld 3.  b/WebRoot/WE

JPA项目的一个小模块案例(二)

前面讲的登录成功之后跳转到welcome.jsp页面,接下来继续: 这个页面功能类似index.jsp界面的功能,主要是一个跳转,根据定义的vUrl进入struts-config.xml获取对应的action,进而找到相关类com.b.portal.action包中的PortalAction.java. PortalAction.java类主要是将当前登录用户的一些基本信息:用户名.用户所属单位等存入到request中,供后面页面展示及后台使用.根据其return findForward("po

如何用C语言将三个整数从大到小依次排列?听我说

将输入的三个整数从大到小依次排列 输入:123 456 789 输出:789 456 123 编程思想:两两比较,引入第三变量. 干货直接上,代码如下: int main()   {    int a,b,c,d;    scanf("%d %d %d",&a,&b,&c);    if(a<b){     d=a;     a=b;     b=d;     }    if(a<c){     d=a;     a=c;     c=d;    }

node.js实用小模块

1.浮点数操作 npm install float 2.MD5加密类 npm install MD5 3.xml解析类 1 npm install elementtree 4.转换字符串大小写 1 npm install convert_str 5.SoapClient 1 npm install soap 6.字符串操作类 1 npm install string 7.缓存 1 npm install memory-cache 8.jsontoxml;  objecttoxml 1 npm i

JSP页面小脚本实现日期比较,Java同理,精简过后的,可能在效率上不太好,有大大可以给优化下就更好了

<% java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyy-MM-dd hh-mm-ss"); java.util.Date d = formatter.parse("2014-06-18 07-30-00"); if (java.lang.System.currentTimeMillis() > d.getTime()) { %> 111111111

python常用小模块使用汇总

在写代码过程中常用到一些好用的小模块,现整理汇总一下: 1.获取当前的文件名和目录名,并添到系统环境变量中. file = os.path.abspath(__file__)                              #获取文件的绝对路径file_name = os.path.basename(file)                         #获取文件名file_dir = os.path.dirname(os.path.dirname(file))      #获取

静态html页面 ul+li模拟table,减少代码冗余,列数切换更方便

先直接上效果图: 二.帖代码 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Author" content="haley"> 6 <meta name="Keywords" content="表格"&

DIV横向排列_CSS如何让多个div盒子并排同行显示

如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式.接下来为大家通过文章+图片+案例方法介绍解决div盒子对象并排横向排列且同行显示方法. 一.使用css float并排显示 我们对div设置一个float浮动属性即可解决不并排显示,只要你的并排div盒子总宽度小于或等于

sql里的多行多列转一行多列小技巧

---恢复内容开始--- [ 今天下午接受了一个紧急小任务,是将一组比赛记录统计出来,将象棋游戏玩家的两条记录在一行里面显示,进数据库看之后是首先想到的是行转列,但是一开始就觉得不对,后来写到一半确实不对,后来上网查询了半天多行多列转一行多列,发现又要写算法又要写函数,看了实在头疼,不想这么麻烦.于是自己突然间灵机一动,闪过一个小想法,立马实施,就是将所有记录前面都加上一个标识列num(row_number()函数),然后用case 判断奇偶行在显示,就行了. select row_number