css经典三栏布局--圣杯布局,双飞翼布局及flex实现

in CSS with 0 comment

布局的传统解决方案，是基于盒状模型，依赖 display 属性 + position属性 + float属性，比如想实现两边固定，中间宽度自适应的经典三栏布局，可以使用圣杯布局，双飞翼布局，主要基于float使元素脱离文档流，然后设置margin-left为负值把浮动元素向上拉一行,所有块（左，中，右）都需要使用相对定位 relative布局)

css脱离文档流属性

position: absolute; 生成绝对定位元素, 脱离正常文档流，会相对于最近的position不为static的元素进行偏移
float: left/right 属性，脱离正常文档流
positioin: relative; 生成相对定位元素, 即相对于自己在文档流中的位置进行偏移，不会脱离正常文档流

圣杯布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    body {
      min-width: 550px; /* 2x leftContent width + rightContent width */
      font-weight: bold;
      font-size: 20px;
    }
    #container {
      padding: 0 200px;
      overflow: hidden;
    }
    .column {
      height: 200px;
      float: left;
      position: relative;
    }
    #left {
      width: 200px;
      margin-left: -100%;
      left: -200px;

      background-color: aqua;
    }
    #right {
      width: 200px;
      margin-left: -200px;
      right: -200px;
      background-color: wheat;
    }
    #center {
      /* width: 200px; */
      width: 100%;
      background-color: tomato;
    }
  </style>

  <body>
    <div id="container">
      <div id="center" class="column">#center</div>
      <div id="left" class="column">#left</div>
      <div id="right" class="column">#right</div>
    </div>
  </body>
</html>

双飞翼布局

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>
<style>
  body {
    min-width: 550px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }
  #container{
      /* padding: 0 200px; */
      overflow: hidden;
  }
  .column{
      height: 200px;
      float: left;
      position: relative;
  }
  #left{
      width: 200px;
      margin-left: -100%;
      /* left: -200px; */

      background-color: aqua;
  }
  #right{
      width: 200px;
      margin-left: -200px;
      /* right: -200px; */
      background-color: wheat;
  }
  #center{
    /* width: 200px; */
      width: 100%;
      background-color: tomato;
  }
  #center #inner-center {
    margin-left: 200px;
    margin-right: 200px;
  }
</style>

<body>

  <div id="container">
    <div id="center" class="column">
      <div id="inner-center">
        #inner
      </div>
    </div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>

</body>

</html>

使用CSS3 Flex弹性布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    body {
      min-width: 550px; /* 2x leftContent width + rightContent width */
      font-weight: bold;
      font-size: 20px;
    }
    #container {
      display: flex;
    }

    #left {
      flex: 0 0 200px;
      height: 200px;
      background-color: aqua;
    }
    #right {
      flex: 0 0 200px;
      height: 200px;
      background-color: wheat;
    }
    #center {
      height: 200px;
      /* width: 200px; */
      flex: 1;
      background-color: tomato;
    }
  </style>

  <body>
    <div id="container">
      <div id="left">#left</div>
      <div id="center">#center</div>
      <div id="right">#right</div>
    </div>
  </body>
</html>

都1202年了还是拥抱Flex布局吧

本文由 dealdot ＜dealdot＃163.com＞ 创作, Full Stack Developer @ DeepBlue
本文最后编辑时间为: Sep 10, 2021 at 09:51 am
转载请注明来源

评论已关闭.