前言
上代码
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
}
.grail-info {
color: #000;
margin-bottom: 5px;
}
.split {
height: 10px;
}
.g-header, .g-footer {
height: 100px;
text-align: center;
line-height: 100px;
background: red;
}
.g-footer {
position: fixed;
bottom: 0;
clear: both;
width: 100%;
background-color: blue;
}
/* float + margin */
.f-content {
height: 200px;
line-height: 200px;
text-align: center;
overflow: hidden;
}
.f-left {
float: left;
width: 200px;
height: 100%;
background: black;
}
.f-center {
margin-left: 200px;
margin-right: 300px;
height: 100%;
background: green;
}
.f-right {
float: right;
width: 300px;
height: 100%;
background: orange;
}
/* 圣杯 */
.g-content {
padding: 0 300px 0 200px;
text-align: center;
height: 200px;
line-height: 200px;
overflow: hidden;
}
.g-left {
position: relative;
float: left;
margin-right: -200px;
right: 200px;
width: 200px;
height: 100%;
background: black;
}
.g-center {
float: left;
width: 100%;
height: 100%;
background: green;
}
.g-right {
float: left;
width: 300px;
height: 100%;
margin-right: -300px;
background: orange;
}
/* 双飞翼 */
.w-content {
height: 200px;
line-height: 200px;
text-align: center;
overflow: hidden;
}
.w-left {
float: left;
width: 200px;
margin-right: -200px;
height: 100%;
background: black;
}
.w-center {
float: left;
width: 100%;
height: 100%;
}
.center-content {
margin-left: 200px;
margin-right: 300px;
background: green;
}
.w-right {
float: left;
width: 300px;
margin-left: -300px;
height: 100%;
background: orange;
}
</style>
</head>
<body>
<!-- setting -->
<div class="grail-info">
<span>左边宽度：</span> <input type="text" id="left-width" name="name" value="200" οnchange="grailChange()">
<span>右边宽度：</span> <input type="text" id="right-width" name="name" value="300" οnchange="grailChange()">
</div>
<!-- 两侧宽度固定，中间宽度自适应 -->
<!-- header -->
<header class="g-header">g-header</header>
<div class="split"></div>
<!-- float -->
<div class="f-content">
<div class="f-left" id="f-left">f-left</div>
<div class="f-right" id="f-right">f-right</div>
<div class="f-center" id="f-center">f-center</div>
</div>
<div class="split"></div>
<!-- 圣杯 -->
<div class="g-content" id="g-content">
<div class="g-left" id="g-left">g-left</div>
<div class="g-center">g-center</div>
<div class="g-right" id="g-right">g-right</div>
</div>
<div class="split"></div>
<!-- 双飞翼 -->
<div class="w-content">
<div class="w-left" id="w-left">w-left</div>
<div class="w-center">
<div class="center-content" id="center-content">w-center</div>
</div>
<div class="w-right" id="w-right">w-right</div>
</div>
<!-- footer -->
<footer class="g-footer">g-footer</footer>
<script type="text/javascript">
function grailChange() {
const $left = document.getElementById('left-width').value
const $right = document.getElementById('right-width').value
// margin + float
const $fLeft = document.getElementById('f-left')
const $fRight = document.getElementById('f-right')
const $fCenter = document.getElementById('f-center')
$fLeft.style.width = $left + 'px'
$fRight.style.width = $right + 'px'
$fCenter.style.marginLeft = $left + 'px'
$fCenter.style.marginRight = $right + 'px'
// 圣杯
const $gContent = document.getElementById('g-content')
const $gLeft = document.getElementById('g-left')
const $gRight = document.getElementById('g-right')
$gContent.style.paddingLeft = $left + 'px'
$gContent.style.paddingRight = $right + 'px'
$gLeft.style.width = $left + 'px'
$gLeft.style.marginRight = -$left + 'px'
$gLeft.style.right = $left + 'px'
$gRight.style.width = $right + 'px'
$gRight.style.marginRight = -$right + 'px'
// 双飞翼
const $wLeft = document.getElementById('w-left')
const $cCenter = document.getElementById('center-content')
const $wRight = document.getElementById('w-right')
$wLeft.style.width = $left + 'px'
$wLeft.style.marginRight = -$left + 'px'
$cCenter.style.marginLeft = $left + 'px'
$cCenter.style.marginRight = $right + 'px'
$wRight.style.width = $right + 'px'
$wRight.style.marginLeft = -$right + 'px'
}
</script>
</body>
</html>
布局方式
- 经典布局：左右float，中间用margin去撑开左右宽度
- 圣杯布局：父级padding出两侧位置，子级都为float：left,左侧relative，right设宽度值，再margin-right负自己宽度，右侧margin-right负自己宽度
- 双飞翼布局：子级都为float：left,左侧margin-right负宽度，右侧margin-left负左侧宽度，挤过去，中间包了一层用margin去撑开左右宽度
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
