圣杯布局(float)

最新推荐文章于 2024-06-13 06:20:33 发布

黑皮蛋88

最新推荐文章于 2024-06-13 06:20:33 发布

阅读量86

点赞数

文章标签： css html

原文链接：https://b23.tv/vUUyhHt

版权

效果

代码

<!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 {
      margin: 0;
    }

    .header, .footer {
      background-color: #eee;
      text-align: center;
      height: 60px;
      line-height: 60px;
    }

    .container {
      background-color: #ccc;
      height: calc(100vh - 120px);
      /* padding可以 */
      /* padding: 0 200px 0 150px; */
      /* margin也可以 */
      margin: 0 200px 0 150px;
    }

    .column {
      /* relative关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。 */
      position: relative;
      float: left;
      height: 100%;
    }

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

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

    .middle {
      width: 100%;
      background-color: palegreen;
    }

  </style>
</head>
<body>
    <div class="header">header</div>
    <!-- 三列布局，中间宽度自适应，两边定宽 -->
    <div class="container">
      <!-- 先加载和渲染middle -->
      <div class="column middle"></div>
      <div class="column left"></div>
      <div class="column right"></div>
    </div>
    <div class="footer">footer</div>
</body>
</html>