高度自适应使用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. leetcode 111

    题目描述: Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along th ...

  2. 线性时间的排序算法--桶排序(以leetcode164. Maximum Gap为例讲解)

    前言 在比较排序的算法中,快速排序的性能最佳,时间复杂度是O(N*logN).因此,在使用比较排序时,时间复杂度的下限就是O(N*logN).而桶排序的时间复杂度是O(N+C),因为它的实现并不是基于 ...

  3. 网页中调用Google地图

    <html> <head>  <meta http-equiv="Content-Type" content="text/html; cha ...

  4. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数013,shape模型

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数013,shape模型 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“pr ...

  5. 企业信息系统——SCM

    供应链是供应商.制造商.仓库.配送中心和渠道商等构成的物流网络.同一个企业可能构成这个网络的不同组成节点,但更多的情况下是由不同的企业构成这个网络中的不同节点.例如,在某条供应链中,某个企业可能即在制 ...

  6. 【数论】Miller_Rabin

    Miller_Rabin素数测试     Miller_Rabin判断单个素数的方法运用了费马小定理,可以说非常之快了.     Miller_Rabin曾经被称作“黑科技”,但是根据费马小定理其实完 ...

  7. 机器学习实战-K-nearest neighbors 算法的优缺点

    K临近算法是基于实例的学习,使用算法的时候我们必须要有接近分类结果的实例训练样本数据. 优点:精度高,对异常值不敏感 缺点: 时间复杂度和空间复杂度比较大.(如果训练样本数据集比较大,需要大量的空间来 ...

  8. Linux应用程序访问字符设备驱动详细过程【转】

    本文转载自:http://blog.csdn.net/coding__madman/article/details/51346532 下面先通过一个编写好的内核驱动模块来体验以下字符设备驱动 可以暂时 ...

  9. 基于webrtc的资源释放问题（一）

    基于webrtc的资源释放问题(一) ——重复释放webrtc的相关资源 背景: 视频通讯大都只是作为一个功能存在于各种应用中,比如微信,qq .既然只是应用的一部分,这样就涉及反复的开启和关闭视频通 ...

  10. App.xaml.cs

    using System.Windows; namespace HelloWorld { /// <summary> /// Interaction logic for App.xaml ...