方法一、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宫格的实现方法的更多相关文章

  1. Android自定义多宫格解锁控件

    在此之前,一直在想九宫格的实现方法,经过一个上午的初步研究终于完成了一个简单的N*N的宫格解锁组件,代码略显粗糙,仅仅做到简单的实现,界面等后期在做优化,纯粹是学习的目的,在算法上有点缺陷,如果有错误 ...

  2. vue 如何拿到后台传回的富文本中的img，进行9宫格排列展示以及相关处理

    描述: res.data.list 返回的数组, 数组中的每个对象有一个 content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理: 1.let img = this. ...

  3. Python爬虫学习笔记之微信宫格验证码的识别(存在问题)

    本节我们将介绍新浪微博宫格验证码的识别.微博宫格验证码是一种新型交互式验证码,每个宫格之间会有一条 指示连线,指示了应该的滑动轨迹.我们要按照滑动轨迹依次从起始宫格滑动到终止宫格,才可以完成验证,如 ...

  4. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  5. 宫格布局实例（注意jquery的版本号要统一）

    <!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...

  6. 宫格布局实例（注意jquery的版本号要统一）2

    <!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...

  7. css-九宫格自适应的实现

    高度自适应使用padding 或 padding-bottom + 百分比来实现: 宽度自适应使用width + 百分比来实现. 下面是实现九宫格自适应的代码: <!DOCTYPE html&g ...

  8. HTML5 Canvas中9宫格的坑

    近期小鸟情人游戏上了手机qq空间,一个3岁的游戏来了她的第二春.为了能有更好的表现,我们对其进行了一次改版. 改版当中一项就是对原来的弹出框样式进行改进.将大块木板材质改成纯色(边框为圆角金属材质)样 ...

  9. 微信小程序多宫格抽奖

    最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...

随机推荐

  1. Learning Python 005 字符串和编码

    Python 字符串和编码 介绍 计算机是美国人发明的,最早只有127个字母被编码到计算机,这个编码表被称为ASCII编码,比如大写字母A的编码是65,小写字母z的编码是122. 处理中文一个字节显然 ...

  2. 12、IGV-Integrative Genomics Viewer

    1.IGV的网址:http://software.broadinstitute.org/software/igv/(java环境) 常见的几种输入格式bam/sam(比对文件)  TDF(bam的精简 ...

  3. 图像的读取，显示与保存（基于skimage模块）

    一 skiamge模块 skimage包的全称是scikit-image SciKit (toolkit for SciPy) ,它对scipy.ndimage进行了扩展,提供了更多的图片处理功能.它 ...

  4. Mybatis中文模糊查询，数据库中有数据，但无结果匹配

    1.Mybatis中文模糊查询,数据库中有数据,但无结果匹配 1.1 问题描述: Mybatis采用中文关键字进行模糊查询,sql语句配置无误,数据库有该数据,且无任何报错信息,但无查询结果 1.2 ...

  5. 机房重构——泛型和“DataTable”

    前言 我们都知道在机房重构的时候,大多数都在用七层进行重构,每一层都依赖实体.所以不管怎么调用,返回的应该是实体参数,这样才符合大多数的逻辑,这样我们试想一下,如果我们要求在U层返回多个实体值,怎么办 ...

  6. 洛谷P4332 [SHOI2014]三叉神经树（LCT）

    传送门 FlashHu大佬太强啦%%% 首先,我们可以根据每一个点的权值为$1$的儿子的个数把每个点记为$0~3$,表示这一个点的点权 先考虑一下暴力的过程,假设从$0$变为$1$,先更改一个叶子结点 ...

  7. android 手写万能adapter适配器

    android开发中,我们离不开adapter,每个项目都有很多地方需要adapter,那么我们如何让自己少写adapter代码呢?那就是封装adapter,让我们的adapter成为万能的adapt ...

  8. Nacos深入浅出（十）

    基本上到第9篇,整个请求的一套就结束了,感觉这里跳跳绕绕很多东西,下面我们来做个总结:从Nacos配置平台修改,到Client请求更新,事件触发去取值返回给客户端,整个过程感觉只分析到了4.5层的深度 ...

  9. C 语言实例 - 创建各类三角形图案

    C 语言实例 - 创建各类三角形图案 创建三角形图案. 实例 - 使用 * 号 #include <stdio.h> int main() { int i, j, rows; printf ...

  10. giihub上的关于js的43道题目

    参考 https://github.com/lydiahallie/javascript-questions