前端_圣杯布局

最新推荐文章于 2024-07-08 12:24:36 发布

我来C咯

最新推荐文章于 2024-07-08 12:24:36 发布

阅读量180

点赞数 1

分类专栏：前端面试题文章标签：前端

本文链接：https://blog.csdn.net/weixin_46874084/article/details/123078249

版权

前端面试题专栏收录该内容

21 篇文章 2 订阅

订阅专栏

圣杯布局目的

1、两侧内容宽度固定，中间内容宽度自适应。
2、三栏布局，中间一栏最先加载、渲染 (主要内容)

html部分

  <div id="header">Header</div>
  <div id="content">
    <div id="center" class="column">Center</div>
    <div id="left" class="column">Left</div>
    <div id="right" class="column">Right</div>
  </div>
  <div id="footer">Footer</div>

css部分

    body {
      min-width: 500px;
    }
    div {
      text-align: center;
    }
    #header {
      background-color: #f1f1f1;
    }
    #content {
      padding-left: 300px;
      padding-right: 200px;
    }
    #content #center {
      background-color: #ddd;
      width: 100%;
    }
    #content #left {
      position: relative;
      background-color: orange;
      width: 300px;
      margin-left: -100%;
      right: 300px;
    }
    #content #right {
      background-color: green;
      width: 200px;
      margin-right: -200px;
    }
    #content .column {
      float: left;
    }
    #footer {
      background-color: #f1f1f1;
      clear: both;
    }

结果