高度自适应使用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. Trace-跟踪高消耗的语句需添加哪些事件

    通常接手一台数据库服务器后,我们会开启Profiler跟踪来了解SQL Server的繁忙情况.我们首先会想到的是监控CPU或Duration超过某一阈值的语句/过程.那么所创建的Trace添加哪些事 ...

  2. Elasticsearch + logstash中文指南

    http://kibana.logstash.es/content/logstash/examples/nginx-access.html http://es.xiaoleilu.com/030_Da ...

  3. openfalcon客户端自定义push 传输到transfer

    . linux客户端部署agent . 编写脚本,比如: #!/usr/bin/env python #!-*- coding:utf8 -*- import requests import time ...

  4. JSP 运行

    Tomcat 上运行 JSP 应用程序 完成一些包装工作后,才能在 Tomcat 上运行 index.jsp 程序.通常需要按照以下步骤操作: 创建 JSP 应用程序.如果只使用一个页面,则称它为 i ...

  5. linux----------CentOS的一些命令记录。

    1.查看linux操作系统位数的命令:getconf LONG_BIT 2.安装sz(下载)和rz(上传)命令:yum install lrzsz 3.tail -n 5 文件名字    : 查看大型 ...

  6. Js原生 双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. android 文字图片合成

    引用:http://blog.csdn.net/cq361106306/article/details/8142526 两种方法: 1.直接在图片上写文字 String str = "PIC ...

  8. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  9. SQL Server 利用批量(batchsize)提交加快数据生成/导入

    在最小化日志操作解析,应用的文章中有朋友反映生成测试数据较慢.在此跟大家分享一个简单的应用,在生成数据过程中采用批量提交的方式以加快数据导入. 此应用不光生成测试数据上,在BCP导入数据中,复制初始化 ...

  10. [已解决] 点击 【Show in system explorer】Eclipse卡死，未响应

    新版的Eclipse自带了 [Show in system explorer] 功能很方便,有一天突然不好用了,点它Eclipse就卡死, 可能由以下原因导致的: (可能性最大)windows本身有问 ...