高度自适应使用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. 【转】给npm设置代理

    可以运行如下两句命令设置代理,注意代理的地址改为自己实际可用的代理. npm config set proxy=http://127.0.0.1:8087 npm config set registr ...

  2. 如何确定某个counter对应的rrd文件

    info.py #!/usr/bin/env python import requests import json import sys d = [ { "endpoint": s ...

  3. http协议 301和302的原理及实现

    一.来看看官方的说法: 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于:  301 redirect: 301 代表永久性转移(Permanently Moved) ...

  4. K近邻分类算法实现 in Python

    K近邻(KNN):分类算法 * KNN是non-parametric分类器(不做分布形式的假设,直接从数据估计概率密度),是memory-based learning. * KNN不适用于高维数据(c ...

  5. .net mvc onexception capture; redirectresult;

    need to set filtercontext.result=new redirectresult('linkcustompage'); done. so... ASP.NET MVC异常处理模块 ...

  6. .NET中通過OUTLOOK發送附件內容

    最近碰到一個發送郵件附件的問題,隨便幾下來,方便以後學習. string[] files = System.IO.Directory.GetFiles(@"~/UploadData" ...

  7. 关于在archlinux中安装virtualbox

    之前安装的时候具体忘记了,现在重新整理一下安装的过程: 1. 安装virtualbox sudo pacman -S virtualbox 安装的过程中因依赖,需要安装提供host模块的包,这里我们安 ...

  8. [attribute^=value] 匹配给定的属性是以某些值开始的元素

    描述: 查找所有 name 以 'news' 开始的 input 元素 HTML 代码: <input name="newsletter" /> <input n ...

  9. VBA 操作 Excel 生成日期及星期

    直接上代码~~ 1.  在一个 Excel 生成当月或当年指定月份的日期及星期 ' 获取星期的显示 Function disp(i As Integer) Select Case i disp = & ...

  10. 【java报错】Could not instantiate listener

    这个错误以前出现过好几次,莫名其妙的出现,莫名其妙的解决掉...昨天好好的,今天又出现了,记下来 2015-03-03 09:38:45.105:INFO:oejs.Server:jetty-8.1. ...