css-九宫格自适应的实现
高度自适应使用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-九宫格自适应的实现的更多相关文章
- 常见css垂直自适应布局(css解决方法)
css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...
- 常见css水平自适应布局
左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- css实现自适应屏幕高度;
css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- 演示:纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css网页自适应-2
昨天中午Google进行了一次在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验,这里我将该讲座 ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- CSS流体(自适应)布局下宽度分离原则
CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...
- CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)
CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...
- CSS+DIV自适应布局
CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...
随机推荐
- leetcode 111
题目描述: Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along th ...
- 线性时间的排序算法--桶排序(以leetcode164. Maximum Gap为例讲解)
前言 在比较排序的算法中,快速排序的性能最佳,时间复杂度是O(N*logN).因此,在使用比较排序时,时间复杂度的下限就是O(N*logN).而桶排序的时间复杂度是O(N+C),因为它的实现并不是基于 ...
- 网页中调用Google地图
<html> <head> <meta http-equiv="Content-Type" content="text/html; cha ...
- 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数013,shape模型
<zw版·Halcon-delphi系列原创教程> Halcon分类函数013,shape模型 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“pr ...
- 企业信息系统——SCM
供应链是供应商.制造商.仓库.配送中心和渠道商等构成的物流网络.同一个企业可能构成这个网络的不同组成节点,但更多的情况下是由不同的企业构成这个网络中的不同节点.例如,在某条供应链中,某个企业可能即在制 ...
- 【数论】Miller_Rabin
Miller_Rabin素数测试 Miller_Rabin判断单个素数的方法运用了费马小定理,可以说非常之快了. Miller_Rabin曾经被称作“黑科技”,但是根据费马小定理其实完 ...
- 机器学习实战-K-nearest neighbors 算法的优缺点
K临近算法是基于实例的学习,使用算法的时候我们必须要有接近分类结果的实例训练样本数据. 优点:精度高,对异常值不敏感 缺点: 时间复杂度和空间复杂度比较大.(如果训练样本数据集比较大,需要大量的空间来 ...
- Linux应用程序访问字符设备驱动详细过程【转】
本文转载自:http://blog.csdn.net/coding__madman/article/details/51346532 下面先通过一个编写好的内核驱动模块来体验以下字符设备驱动 可以暂时 ...
- 基于webrtc的资源释放问题(一)
基于webrtc的资源释放问题(一) ——重复释放webrtc的相关资源 背景: 视频通讯大都只是作为一个功能存在于各种应用中,比如微信,qq .既然只是应用的一部分,这样就涉及反复的开启和关闭视频通 ...
- App.xaml.cs
using System.Windows; namespace HelloWorld { /// <summary> /// Interaction logic for App.xaml ...