美文网首页
CSS创建三栏布局方案

CSS创建三栏布局方案

作者: 王小滚 | 来源:发表于2018-10-30 22:26 被阅读0次
image.png

有几种解决方案呢?

1. float方案

 <style>
      .layout_float .left-right-center .left {
        float: left;
        width: 300px;
        height: 500px;
        background-color: aqua;
      }
      .layout_float .left-right-center .right {
        float: right;
        width: 300px;
        height: 500px;
        background-color: red;
      }
      .layout_float .left-right-center .center {
        height: 500px;
        background-color: blue;
      }
      .layout_float .left-right .left {
        background-color: red;
        width: 300px;
        height: 300px;
        float: left;
      }
      .layout_float .left-right .right {
        background-color: yellow;
        height: 300px;
      }
    </style>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>
          浮动解决方案:三栏布局
        </h1>
      </div>
    </article>

实现原理:
左右栏分别浮动在窗口两边,且已经脱离文档流,中间块(处于文档流中)受左右浮动影响被卡在中间无法继续向左右伸展已达到自适应。
缺点:

  1. dom元素需要遵循,左-右-中的书写顺序,否则会出现中间内容铺满整行,右边元素下沉的情况。
  2. 当中间高度超出的情况会出现中间区域溢出。

优化方案:
清除浮动或创建BFC

<style>
      
      .layout_float .left-right-center .left {
        float: left;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }
      .layout_float .left-right-center .right {
        float: right;
        width: 300px;
        height: 300px;
        background-color: red;
      }
      .layout_float .left-right-center .center {
        margin-left: 300px;
        margin-right: 300px;
        background-color: blue;
      }
      .layout_float .left-right .left {
        background-color: red;
        width: 300px;
        height: 300px;
        float: left;
      }
      .layout_float .left-right .right {
        background-color: yellow;
        height: 300px;
      }
    </style>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>
          浮动解决方案:三栏布局
        </h1>
      </div>
    </article>

2. 绝对定位方案

 <style>
        .layout_absolute .left-right-center>div{
          position: absolute;
          height: 300px;
        }
        .layout_absolute .left {
          left:0;
          background-color: aqua;
          width: 300px;
        }
        .layout_absolute .right {
          right:0;
          width: 300px;
          background-color: red;
        }
        .layout_absolute .center {
          left:300px;
          right: 300px;
          background-color: blue;
        }
      </style>
      <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h1>
            绝对定位解决方案
          </h1>
        </div>
      </article>

实现原理:
使元素脱离文档流,进行绝对定位。
缺点:
由于容器脱离了文档流,导致子元素也必须脱离文档流

3. flex布局方案

在 Flexbox 模型中,有三个核心概念:
– flex,需要布局的元素
– flex容器
– 排列方向(direction),决定了 flex 项的布局方向


image.png
   <style>
     .layout_flexbox {
         margin-top: 20px;
       }
       .layout_flexbox * {
         height: 300px;
       }

       .layout_flexbox .left-right-center {
         display: flex;
         flex-direction: row;
       }
       .layout_flexbox .left {
         width: 300px;
         background-color: red;
       }
       .layout_flexbox .right {
         width: 300px;
         background-color: blue;
       }
       .layout_flexbox .center {
         flex: 1;
         background-color: yellow;
       }
     </style>
     <article class="left-right-center">
       <div class="left"></div>
       <div class="center">
           <h1>
             flex解决方案
           </h1>
         </div>
       <div class="right"></div>
     </article>

缺点:
浏览器兼容性不太好,em...

4. table布局

<style>
        .left-right-center {
          display: table;
          width: 100%;
        }
         .left-right-center > div {
          display: table-cell;
        }
        .left {
          width: 300px;
          background-color: yellow;
        }
        ..center {
          background-color: blue;
        }
        .right {
          width: 300px;
          background-color: red;
        }
      </style>
      <article class="left-right-center">
          <div class="left"></div>
          <div class="center">
              <h1>
                table布局解决方案
              </h1>
            </div>
          <div class="right"></div>
      </article>

优点:
兼容性很好,设置简单
缺点:

  • 无法设置栏边距,左中右模块间无间隔
  • 对SEO不够友好
  • 当一个格高度增加,其余的格也会被动增加高度

5. 网格布局

先了解下网格布局的基本定义吧!
Grid Container:设置了 display: gird 的元素。 是所有grid item的直接父项。
重要属性:

  1. display将元素定义为 grid contaienr,并为其内容建立新的网格格式化上
    下文。
  2. grid-template-columns / grid-template-rows:使用多个值来定义网格的列和行。这些值表示每个网格的大小
.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Grid Item:Grid 容器的孩子(直接子元素)。
解决方案:

    <style>
        .layout_grid {
        display: grid;
        width: 100%;
        grid-template-rows: 300px;
        grid-template-columns: 200px auto 200px;
        }
        .left {
        background-color: red;
        }
        .main {
        margin: 0 20px;
        background-color: green;
        }
        .right {
        background-color: blue;
        }
    </style>
    <article class=" layout_grid">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
    </article>

相关文章

网友评论

      本文标题:CSS创建三栏布局方案

      本文链接:https://www.haomeiwen.com/subject/uzynaftx.html