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>
    
  • 相关阅读:
    腾讯云微服务
    docker 总结
    TDSQl
    腾讯云网络介绍
    openstack 搭建
    kvm2
    kvm
    ERA-interim数据下载
    ERA-interim
    win10软件使用指南备忘录
  • 原文地址:https://www.cnblogs.com/xiongmanli/p/6065714.html
Copyright © 2011-2022 走看看