n宫格的实现方法
方法一、table#
1、看成多列##
<style>
.line{ display: table; width: 1024px;
clear:both; overflow:auto; /*-----设置父div高度包住子div高度*/}
.news{ display: table-row; float: left; background-color:#236483;}
.news img,.news-txt{ float:left; display: table-cell; height: 150px;
width: 100%; font-size: 1.5em; text-align: center;}
<html>
<div class="line">
<!-- 第一列 -->
<div class="news">
<!-- 第一格 -->
<img src="img/news.jpg"><div class="news-txt">a</div>
<!-- 第二格 -->
<img src="img/news.jpg"><div class="news-txt">b </div>
</div>
<!-- 第二列 -->
<div class="news">
<!-- 第一格 --> <div class="news-txt">a</div> <img src="img/news.jpg">
<!-- 第二格 --> <div class="news-txt">b</div> <img src="img/news.jpg">
</div>
</div>
2、看成多行##
<style>
.line{ display: table; width: 1024px;
clear:both; overflow:auto; /*-----设置父div高度包住子div高度*/}
.news{ display: table-row; float: left; background-color:#236483;}
.news img,.news-txt{ float:left; display: table-cell; height: 150px;
width: 25%; font-size: 1.5em; text-align: center;}
<html>
<div class="line">
<!-- 第一行 -->
<div class="news">
<!-- 第一格 -->
<img src="img/news.jpg"><div class="news-txt"> a </div>
<!-- 第二格 -->
<img src="img/news.jpg"><div class="news-txt"> b </div>
</div>
<!-- 第二行 -->
<div class="news">
<!-- 第一格 -->
<div class="news-txt"> c </div>
<img src="img/news.jpg">
<!-- 第二格 -->
<div class="news-txt"> d </div>
<img src="img/news.jpg">
</div>
</div>
总结:
1、优点table-cell单元格高度取其所在行l单元格高度的最大值,高度统一
2、缺点:①ie6/7兼容性不好, ②后台输出时需要水平、垂直各repeat
方法二、inline-block#
<style>
.line{ display: table; width: 1024px;
clear:both; overflow:auto; /*-----设置父div高度包住子div高度*/}
.news{ display: table-row; float: left; background-color:#236483;}
.news img,.news-txt{ float:left; display: inline-block; height: 150px;
width: 100%; font-size: 1.5em; text-align: center;}
区别:display: inline-block
其余相同
优点:①可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素中;②所在行高取单元格最高值
③ie6/7虽然不支持display,但让其表现的跟inline-block一样
n宫格的实现方法的更多相关文章
- Android自定义多宫格解锁控件
在此之前,一直在想九宫格的实现方法,经过一个上午的初步研究终于完成了一个简单的N*N的宫格解锁组件,代码略显粗糙,仅仅做到简单的实现,界面等后期在做优化,纯粹是学习的目的,在算法上有点缺陷,如果有错误 ...
- vue 如何拿到后台传回的富文本中的img,进行9宫格排列展示以及相关处理
描述: res.data.list 返回的数组, 数组中的每个对象有一个 content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理: 1.let img = this. ...
- Python爬虫学习笔记之微信宫格验证码的识别(存在问题)
本节我们将介绍新浪微博宫格验证码的识别.微博宫格验证码是一种新型交互式验证码,每个宫格之间会有一条 指示连线,指示了应该的滑动轨迹.我们要按照滑动轨迹依次从起始宫格滑动到终止宫格,才可以完成验证,如 ...
- JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...
- 宫格布局实例(注意jquery的版本号要统一)
<!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...
- 宫格布局实例(注意jquery的版本号要统一)2
<!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...
- css-九宫格自适应的实现
高度自适应使用padding 或 padding-bottom + 百分比来实现: 宽度自适应使用width + 百分比来实现. 下面是实现九宫格自适应的代码: <!DOCTYPE html&g ...
- HTML5 Canvas中9宫格的坑
近期小鸟情人游戏上了手机qq空间,一个3岁的游戏来了她的第二春.为了能有更好的表现,我们对其进行了一次改版. 改版当中一项就是对原来的弹出框样式进行改进.将大块木板材质改成纯色(边框为圆角金属材质)样 ...
- 微信小程序多宫格抽奖
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...
随机推荐
- Luogu 2900 [USACO08MAR]土地征用Land Acquisition
斜率优化dp. 首先发现如果存在$x$和$y$使得$len(x) \geq len(y)$并且$wid(x) \geq wid(y)$,那么$y$直接不考虑就好了,因为在买$x$的时候就把$y$顺便带 ...
- iObjects for java +weblogic
- 经典DP 嵌套矩形 (南洋理工ACM—16)
本来是个很水的DP,结果被自己的代码习惯给打败了 代码: #include<iostream> #include<stdlib.h> #include<string.h& ...
- 利用Fitnesse测试外部jar包
1. 下载Fitnesse官方jar http://www.fitnesse.org/FitNesseDownload 2. 下载后,创建下面目录,其中FitnesseRoot目录,不需要创建,Fit ...
- Spring 属性配置
此文已由作者尧飘海授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 随着Spring的不断发展与完善,早期它的功能可能只看做是IOC(反转控制)的容器,或者其最大的亮点为DI( ...
- oracle语句解析顺序
- java学习笔记——基于Robot类的屏幕分享
直接上代码,具体看注释: package robot; import java.awt.AWTException; import java.awt.Dimension; import java.awt ...
- Node.js 内置模块crypto加密模块(4) Diffie Hellman
Diffie-Hellman( DH ):密钥交换协议/算法 ( Diffie-Hellman Key Exchange/Agreement Algorithm ) 百科摘录: Diffie-Hell ...
- CTS/APIO2019游记
退役后游记... 这次是真·游记了 ghj1222自从省选翻车后心情一直不错 5.12 (CTS 报到) 没去thupc(话说都不知道thupc这时候举行),于是就这天从衡水出发了 翻来覆去睡不着觉, ...
- idea长用快捷键
1CA(ctrl+alt) 1.1(记忆mlv) ctrl alt m 代码封装成方法 ctrl alt L格式化代码 ctrl alt v补全返回值 (eclipse: alt shift l) 1 ...