css圣杯布局的三种方式与双飞翼布局

Posted 2021-09-13 小王子

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;
}

以上就是两种布局的方式，如果有新的方法可以告诉我，我添加上去，蟹蟹。