zoukankan      html  css  js  c++  java
  • 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;
    			 90%;
    			padding-bottom: 90%;
    			
    		}
    		/* .clearfix:after{
    			visibility: hidden;
    			display: inline-block;
    			content: "";
    			height: 0;
    			clear: both;
    			*zoom: 1;
    			
    		} */
    		.main>div {
    			 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>
    
  • 相关阅读:
    微服务架构设计和应用
    Jenkins持续部署
    Jenkins服务器维护
    Jenkins管理插件(备份插件)
    Jenkins安全
    Jenkins分布式构建
    Jenkins报表 代码 指标分析
    Jenkins远程测试
    Jenkins邮件通知
    Jenkins自动化测试
  • 原文地址:https://www.cnblogs.com/xiongmanli/p/6065714.html
Copyright © 2011-2022 走看看