乐趣区

关于前端:css圣杯布局的三种方式与双飞翼布局

jiezi

css 圣杯布局的三种形式

一、圣杯布局的简略介绍

圣杯布局就是三栏布局，其中左右两栏固定宽度，两头局部自适应

1. 利用 box-sizing 的 border-box 属性进行布局

其相干容器的布局，此处用 react 编写，如果是其余的间接用 class 替换 className 即可

<div className='contain'>
    <div className='mide'>
      爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府
    </div>
    <div className='left'></div>
    <div className='right'></div>
  </div>

首先进行对三个盒子增加浮动的属性 float: left; 对于 class 名字为 left 的盒子增加 margin-left:-100% 的属性使其在两头盒子的左侧，给左边盒子增加 margin-left:-200px，这里的 -200px 是你右侧盒子的宽度。你右侧盒子写多少，就是多少宽度。所有的 css 代码如下：

.contain{overflow: hidden;}
.mide{
  width: 100%;
  height: 800px;
  background-color: #000;
  color: #fff;
  box-sizing: border-box;
  padding: 0 200PX;
  float: left;
}
.left{
  width: 200px;
  height: 800px;
  margin-left: -100%;
  float: left;
  background-color: #215253;
}
.right{
  margin-left:-200px;
  width: 200px;
  height: 800px;
  float: left;
  background-color: #352625;
}

这里的 box-sizing: border-box; 属性是的意思是通过从 已设定的宽度和高度 别离减去 边框和内边距 能力失去 内容的宽度和高度。这样就是一个简略的圣杯布局。

2. 利用 display:flex 属性进行圣杯布局

其是这种事最简略的布局，其 css 是起码得，我间接贴代码，这里的 html 与下面的不太一样，请留神辨别

<div className='contain'>
    <div className='left'></div>
    <div className='mide'>
      爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府
    </div>
    <div className='right'></div>
  </div>

css 代码如下：

.contain{display: flex;}
.mide{
  height: 800px;
  flex: 1;
  background-color: #000;
  color: #fff;
}
.left{
  width: 200px;
  height: 800px;
  background-color: #215253;
}
.right{
  width: 200px;
  height: 800px;
  background-color: #352625;
}

这中布局是比拟罕用的，如果不思考低版本浏览器的兼容性的话。

3. 利用定位属性 position: relative; 进行布局

其 html 的代码如下

<div className='contain'>
    <div className='mide'>
      爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府
    </div>
    <div className='left'></div>
    <div className='right'></div>
  </div>

css 代码如下：

.contain{
  overflow: hidden;
  padding: 0 200px;
}
.mide{
  width: 100%;
  height: 800px;
  background-color: #000;
  color: #fff;
  float: left;
}
.left{
  position: relative;
  left: -200px;
  width: 200px;
  height: 800px;
  margin-left: -100%;
  float: left;
  background-color: #215253;
}
.right{
  margin-left:-200px;
  position: relative;
  right: -200px;
  width: 200px;
  height: 800px;
  float: left;
  background-color: #352625;
}

这种布局是依附定位实现的，我感觉用起来不是很好的样子

双飞翼布局

简介：双飞翼布局与圣杯布局达成的成果相似，只是实现办法有所差异而已。区别在于双飞翼给两头块套了一个容器，通过设置该容器外部的两头块 margin 属性从而使两头块两侧的内容不被左右块遮挡。
html 代码：

<div className='contain'>
    <div className='mide'>
      <div className='inner'>
        爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府爽肤水开封府
      </div>
    </div>
    <div className='left'></div>
    <div className='right'></div>
  </div>

css 代码：

.contain{overflow: hidden;}
.mide{
  width: 100%;
  height: 800px;
  background-color: #000;
  color: #fff;
  float: left;
}
.inner{margin: 0 200px;}
.left{
  width: 200px;
  height: 800px;
  margin-left: -100%;
  float: left;
  background-color: #215253;
}
.right{
  margin-left:-200px;
  width: 200px;
  height: 800px;
  float: left;
  background-color: #352625;
}

以上就是两种布局的形式，如果有新的办法能够通知我，我增加下来，蟹蟹。

退出移动版