高度自适应使用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. js的实参是按值传递还是按引用传递

    1.如果是基本类型,则是按值传递 var str = 'one';function f(string) {    string = 'two';}f(str);console.log(str); // ...

  2. ios - loadView与viewDidload

    从打印结果可以看出,先调用loadView再调用viewDidload 代码: // // ViewController.m // test // // Created by 裴波波 on 16/4/ ...

  3. 游戏制作之路：游戏引擎选择、Mac下和Windows下UnrealEngine 4体验对比、文档及其他

    UnrealEngine 4和Unity3d的选择 订阅了UrealEngine4(UE4)开发者.我开始做网站用的是ASP.NET和C#,之后做网站虽然换用更方便的PHP(因为做的都是小网站).我想 ...

  4. 修改远程桌面端口号.bat

    @color 0A @title 修改远程桌面端口号 by wjshan0808 @echo off echo 请输入端口号 set /p port= reg add "HKLM\SYSTE ...

  5. ExtJs Panel 滚动条设置

    设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...

  6. PHP排序函数

    /** * 对查询结果集进行排序 * http://www.onethink.cn * /Application/Common/Common/function.php * * @access publ ...

  7. Boadload和Image$$??$$Limit含义

    Bootloader 即引导加载程序,是系统加电后运行的第一段软件代码.简单的说它们都是bootloader,所完成的任务也大同小异. 熟悉x86体系结构的朋友肯定知道,x86平台上bootloade ...

  8. Linux开机流程

    在开机时,由于80x86的特性CS(Code Segment)这个寄存器中放的都是1,而IP(Instruction Pointer)这个寄存器中全部放着0,换句话说,CS=FFFF而IP=0000. ...

  9. Java中的4种代码块

    一.普通代码块 直接在一个方法中出现的{}就称为普通代码块,例子程序如下: public class CodeDemo01{ public static void main(String[] args ...

  10. GWT入门学习之下载安装

    1.准备 安装 jdk: 下载路径:http://download.oracle.com/otn-pub/java/jdk/8u92-b14/jdk-8u92-windows-i586.exe?Aut ...