CSS实现栅格布局
2024-08-31 11:04:19
CSS实现栅格布局
设置容器container:
.grid-container {
width: 100%;
max-width: 1200px;
}
清除浮动:
.row:before, .row:after {
content: "";
display: block;
height:;
width:;
visibility: hidden;
clear: both;
}
假设有12列布局:
[class*='col_'] {
float: left;
min-height: 1px;
width: 8.33%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.col_1 { width: 8.33%; }
.col_2 { width: 16.66%; }
.col_3 { width: 25%; }
.col_4 { width: 33.33%; }
.col_5 { width: 41.66%; }
.col_6 { width: 50%; }
.col_7 { width: 58.33%; }
.col_8 { width: 66.66%; }
.col_9 { width: 75%; }
.col_10 { width: 83.33%; }
.col_11 { width: 91.66%; }
.col_12 { width: 100%; }
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>自适应布局</title>
<style type="text/css">
body {
margin: 0;
}
.header {
background-color: #000;
color: #fff;
height: 5vh;
text-align: center;
line-height: 5vh;
}
.footer {
width: 100%;
background-color: #000;
color: #fff;
height: 5vh;
text-align: center;
line-height: 5vh;
position: fixed;
bottom: 0;
}
.grid-container {
margin: 0 auto
}
.col_3 {
height: 90vh;
background-color: #ddd;
}
.col_9 {
height: 90vh;
background-color: #ccc;
}
</style> <script type="text/javascript">
let width = document.documentElement.getBoundingClientRect().width;
// 1rem = 1vw;
let rem = width/100;
document.documentElement.style.fontSize = rem+'px';
</script>
</head>
<body>
<header class="header">header</header>
<div class="grid-container">
<div class="row">
<div class="col_3">col_3</div>
<div class="col_9">col_9</div>
</div>
</div>
<footer class="footer">footer</footer>
</body>
</html>
最新文章
- 使用json存储结构化数据
- jquery的colorbox关闭并传递数据到父窗
- Linux 挂载存储方法
- 《Linear Algebra and Its Applications》-chaper3-行列式-克拉默法则
- [置顶] Android系统移植与调试之------->;如何修改Android设备状态条上音量加减键在横竖屏的时候的切换与显示
- js实现文本框或文本域在用户输入时(oninput)触发事件,操作元素
- Persistent Bookcase
- 201521123049 《JAVA程序设计》 第8周学习总结
- AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框
- docker-- 卷
- 自己动手为Spark 2.x添加ALTER TABLE ADD COLUMNS语法支持
- ABP框架系列之十六:(Dapper-Integration-Dapper集成)
- Codeforces 999F Cards and Joy(二维DP)
- P1012 拼数
- redismyadmin安装(支持redis4 集群模式)
- 用MVC5+EF6+WebApi 做一个小功能(四) 项目分层功能以及文件夹命名
- 怎样在xcode5中使用低版本sdk,解决兼容ios7ui问题
- Python的学习之-计算机编码和二进制
- 超链接中 utm_source, utm_medium 等参数的含义是什么?
- Azure静态公网ip自助反解