高度自适应使用padding 或 padding-bottom + 百分比来实现；

宽度自适应使用width + 百分比来实现。

下面是实现九宫格自适应的代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>css01-九宫格</title>

	<style>

		* { padding: 0; margin: 0; }

		.main {

			background-color: #fff;

			width: 90%;

			padding-bottom: 90%;

		}

		/* .clearfix:after{

			visibility: hidden;

			display: inline-block;

			content: "";

			height: 0;

			clear: both;

			*zoom: 1;

		} */

		.main>div {

			width: 26%;

			padding-bottom: 26%;

			border: 1% solid #fff;

			background-color: #E78326;

			border-radius: 3%;

			float: left;

			margin: 1%;

		}

	</style>

</head>

<body>

	<div class="main clearfix">

		<div class="box1"></div>

		<div class="box2"></div>

		<div class="box3"></div>

		<div class="box4"></div>

		<div class="box5"></div>

		<div class="box6"></div>

		<div class="box7"></div>

		<div class="box8"></div>

		<div class="box9"></div>

	</div>

</body>

</html>

css-九宫格自适应的实现的更多相关文章

  1. 常见css垂直自适应布局（css解决方法）

    css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...

  2. 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  3. css实现自适应屏幕高度；

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  4. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  5. 演示：纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. css网页自适应-2

    昨天中午Google进行了一次在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验,这里我将该讲座 ...

  7. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  8. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  9. CSS实现自适应不同大小屏幕的背景大图的两种方法（转自简书）

    CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...

  10. CSS+DIV自适应布局

    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...

随机推荐

  1. RabbitMQ学习总结 第三篇：工作队列Work Queue

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  2. MongoDb 聚合报错

    聚合框架它是数据聚合的一个新框架,其概念类似于数据处理的管道. 每个文档通过一个由多个节点组成的管道,每个节点有自己特殊的功能(分组.过滤等),文档经过管道处理后,最后输出相应的结果. 管道基本的功能 ...

  3. bzoj2424 [HAOI2010]订货

    模拟一下仓库里面存储物品的价格情况即可,如果当前物品大于仓库里面物品那么就替换一下仓库里的物品,然后订货直接从仓库里先取,仓库里不够则直接购买,每次做完后记得买当前物品填补一下仓库直至仓库填满,当然这 ...

  4. 14. 星际争霸之php设计模式--状态模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  5. 递归函数 Python

    函数: def fact(n): if n==1: return 1 return n * fact(n-1) 递归过程: print(fact(5)) >>fact(5) >> ...

  6. 关于ClassLoader的一点小问题

    今天在看某框架的源码的时候,遇到一个使用URLClassLoader加载Servlet类的问题,当自己在eclipse里面做试验的时候,始终无法把Class加载成功.比如: ClassLoader c ...

  7. Mac下安装LNMP(Nginx+PHP5.6)环境

    [转自:http://avnpc.com/pages/install-lnmp-on-osx] 安装Homebrew 最近工作环境切换到Mac,所以以OS X Yosemite(10.10.1)为例, ...

  8. [OGRE]最小ogre程序的流程

    总结一下最小ogre程序的流程: 1 创建Ogre::Root 2 用Ogre::Root加载插件,必须载入的是场景管理器和渲染器 3 调用Ogre::ResourceGroupManager::ge ...

  9. 【转】Repository has not been enabled to accept revision propchanges

    转载地址:http://lg-zhou.blog.163.com/blog/static/178068920111179341041/ 使用SVN提交版本信息时,注释内容写的不全.通过右键Tortoi ...

  10. python基本数据类型之集合set

    一.集合的定义 set集合,是一个无序且不重复的元素集合. 集合对象是一组无序排列的可哈希的值,集合成员可以做字典中的键.集合支持用in和not in操作符检查成员,由len()内建函数得到集合的基数 ...