圣杯布局和双飞翼布局

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

We_jia

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

阅读量269

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/We_jia/article/details/100849222

版权

HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

三栏布局（包括圣杯布局和双飞翼布局）参考：https://blog.csdn.net/reslicma/article/details/86942182#_143

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" center="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" center="ie=edge">
    <title>圣杯布局</title>
    <style>
.main {
  padding: 0 200px 0 150px;
}

.center,
.left,
.right {
  float: left;
  position: relative;
  height: 400px;
}

.center {
  width: 100%;
  background-color: #f5c531;
}

.left {
  width: 150px;
  background-color: #a0c263;
  margin-left: -100%;
  left: -150px;
}
 
.right{
  background-color: #a0c263;
  width: 200px;
  margin-left: -200px;
  right: -200px;
}
    </style>
</head>
<body>
        <!-- 要求center区域优先渲染 -->
    <div class="main">
        <div class="center">center</div>
        <aside class="left">left</aside>
        <aside class="right">right</aside>
    </div>
    
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" center="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" center="ie=edge">
    <title>双飞翼布局</title>
<style>


.left,
.right {
  float: left;
  height: 400px;
}
.center-wrapper {
  width: 100%;
  float: left;
}
.center {
  margin: 0 200px 0 150px;
  background-color: #f5c531;
  height: 400px;
}

.left {
  width: 150px;
  background-color: #a0c263;
  margin-left: -100%;
}

.right {
  background-color: #a0c263;
  width: 200px;
  margin-left: -200px;
}

</style>
</head>
<body>
        <div class="main"></div>
            <div class="center-wrapper">
                <div class="center">center</div>
            </div>
            <aside class="left">left</aside>
            <aside class="right">right</aside>
        </div>
              
</body>
</html>

We_jia

关注

0
点赞
踩
1

收藏

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

三栏布局（包括圣杯布局和双飞翼布局）参考：https://blog.csdn.net/reslicma/article/details/86942182#_143圣杯布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name...
复制链接

扫一扫

专栏目录