圣杯布局和双飞翼布局

最新推荐文章于 2025-08-07 11:58:47 发布

转载最新推荐文章于 2025-08-07 11:58:47 发布 · 165 阅读

文章标签：

#css

学习专栏收录该内容

50 篇文章

订阅专栏

博客主要介绍了圣杯布局和双飞翼布局，还给出了相关参考链接。其中提到双飞翼布局相较于圣杯布局，减少了相对布局和一些宽度设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圣杯布局和双飞翼布局

https://www.cnblogs.com/tinyphp/p/4743674.html

圣杯布局：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>
  <style>
    html,
    body,
    .parent {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .bd {
      padding-left: 150px;
      padding-right: 190px;
    }
    .left {
      background: #E79F6D;
      width: 150px;
      float: left;
      margin-left: -100%;
      position: relative;
      left: -150px;
    }
    .main {
      background: #D6D6D6;
      width: 100%;
      float: left;
    }
    .right {
      background: #77BBDD;
      width: 190px;
      float: left;
      margin-left: -190px;
      position: relative;
      right: -190px;
    }
  </style>
</head>

<body>
  <div class="bd">
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
</body>
</html>

效果：

双飞翼布局

<div class="bd">
    <div class="main">
        <div class="inner">
            Main
        </div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>

.bd{
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.left{
    background: #E79F6D;
    width:150px;
    float:left;
    margin-left:-100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.main{
    background: #D6D6D6;
    width:100%;
    float:left;

}
.right{
    background: #77BBDD;
    width:190px;
    float:left;
    margin-left:-190px;
    /*position:relative;*/
    /*right:-190px;*/
}
.inner{
    margin-left:150px;
    margin-right:190px;
}