百分比布局双飞翼布局圣杯布局

最新推荐文章于 2022-08-16 13:08:53 发布

bage0280

最新推荐文章于 2022-08-16 13:08:53 发布

阅读量110

点赞数

原文链接：http://www.cnblogs.com/LXW2002326/p/11502593.html

版权

1.百分比布局：所有的百分比都是相对父级的

Div{ Width：50%;}div的宽是它父级元素的百分之五十

2.双飞翼布局　

中间固定两边自适应

　　<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="utf-8">
　　　　<title>双飞翼布局</title>
　　　　<style type="text/css">
　　　　　　.left, .center, .right {
　　　　　　　　float: left;
　　　　　　　　min-height: 130px;
　　　　　　　　text-align: center;
　　　　　　}
　　　　　　.left {
　　　　　　　　margin-left: -100%;
　　　　　　　　background: green;
　　　　　　　　width: 200px;
　　　　　　}

　　　　　　.right {
　　　　　　　　margin-left: -300px;
　　　　　　　　background-color: red;
　　　　　　　　width: 300px;
　　　　　　}
　　　　　　.center {
　　　　　　　　background-color: blue;
　　　　　　　　width: 100%;
　　　　　　}
　　　　　　.center1{
　　　　　　　　margin: 0 300px 0 200px;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="cont">
　　　　　　<div class="center">
　　　　　　　　<div class="center1">center</div>
　　　　　　</div>
　　　　　　<div class="left">left</div>
　　　　　　<div class="right">right</div>
　　　　</div>
　　</body>
　　</html>

3.圣杯布局

两端固定中间自适应

　　<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="utf-8">
　　　　<title>圣杯布局</title>
　　　　<style type="text/css">
　　　　　　.cont {
　　　　　　　　padding: 0 300px 0 200px;
　　　　　　}
　　　　　　.left, .center, .right {
　　　　　　　　position: relative;
　　　　　　　　min-height: 130px;
　　　　　　　　float: left;
　　　　　　}
　　　　　　.left {
　　　　　　　　left: -200px;
　　　　　　　　margin-left: -100%;
　　　　　　　　background: green;
　　　　　　　　width: 200px;
　　　　　　}
　　　　　　.right {
　　　　　　　　right:-300px;
　　　　　　　　margin-left: -300px;
　　　　　　　　background-color: red;
　　　　　　　　width: 300px;
　　　　　　}
　　　　　　.center {
　　　　　　　　background-color: blue;
　　　　　　　　width: 100%;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="cont">
　　　　　　<div class="center">中间</div>
　　　　　　<div class="left">左边</div>
　　　　　　<div class="right">右边</div>
　　　　</div>
　　</body>
　　</html>

Margin-right设置为整数不会对自身元素造成影响让平行元素往右移动

Margin-right设置为负数自身元素就会向右移动

转载于:https://www.cnblogs.com/LXW2002326/p/11502593.html

bage0280

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百分比布局双飞翼布局圣杯布局

1.百分比布局：所有的百分比都是相对父级的 Div{ Width：50%;}div的宽是它父级元素的百分之五十2.双飞翼布局　中间固定两边自适应　　<!DOCTYPE html>　　<html>　　<head> 　　　　<meta charset="utf-8"&...
复制链接

扫一扫