两栏布局与三栏布局(圣杯布局与双飞翼布局)

news/2024/4/30 18:35:41/文章来源:https://blog.csdn.net/weixin_65402230/article/details/127266322

两栏布局

右侧绝对定位的写法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {margin: 0;}.wrap {width: 325px;height: 720px;overflow: hidden;}.item {position: relative;height: 100px;border: 1px solid #000;}.item .left {width: 100px;height: 100%;background-color: orange;}.item .right {position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin-left: 100px;padding-right: 100px;background-color: green;box-sizing: border-box;}</style></head><body><div class="wrap"><div class="item"><div class="left"></div><div class="right"></div></div><div class="item"><div class="left"></div><div class="right"></div></div><div class="item"><div class="left"></div><div class="right"></div></div><div class="item"><div class="left"></div><div class="right"></div></div></div></body>
</html>

左侧绝对定位的写法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {margin: 0;}.wrap {width: 325px;height: 720px;}.item {position: relative;height: 100px;border: 1px solid #000;}.item .left {position: absolute;top: 0;left: 0;width: 100px;height: 100%;background-color: orange;}.item .right {width: 100%;height: 100%;padding-left: 100px;background-color: green;box-sizing: border-box;}</style></head><body><div class="wrap"><div class="item"><div class="left"></div><div class="right"></div></div><div class="item"><div class="left"></div><div class="right"></div></div><div class="item"><div class="left"></div><div class="right"></div></div><div class="item"><div class="left"></div><div class="right"></div></div></div></body>
</html>

在这里插入图片描述

三栏布局

圣杯布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html,body,.container {height: 100%;margin: 0;}.container {margin: 0 200px 0 150px;}.container .column {float: left;position: relative;height: 100%;}.container .middle {width: 100%;background-color: green;}.container .left {left: -150px;width: 150px;margin-left: -100%;background-color: orange;}.container .right {right: -200px;width: 200px;margin-left: -200px;background-color: red;}</style></head><body><div class="container"><div class="column middle">sssss</div><div class="column left"></div><div class="column right"></div></div></body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html,body,.container {height: 100%;margin: 0;}.container .column {float: left;height: 100%;}.container .middle {width: 100%;background-color: green;}.container .middle .main {height: 100%;margin: 0 200px 0 150px;}.container .left {width: 150px;margin-left: -100%;background-color: orange;}.container .right {width: 200px;margin-left: -200px;background-color: red;}</style></head><body><div class="container"><div class="column middle"><div class="main">11111</div></div><div class="column left"></div><div class="column right"></div></div></body>
</html>