1. 技术文章
  2. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

由 雨燕双飞 提交于 2020-11-22 06:57:14

1.一个div固定，一个div自适应宽度。两种情况，固定在左或者在右。

HTML：

<div class="box1">
    <div class="main">
        内容自适应宽度
    </div>
    <div class="aside">
        侧栏固定宽度
    </div>
</div>

这两种情况的HTML排版顺序都是一样的。

CSS：

右边固定宽度：

.box1 {
  clear: both;
  overflow: hidden;
  padding-right: 110px;/*重要属性，这个值是侧栏的right值*/
}
.box1 .main {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: deepskyblue;
  float: left;
}
.box1 .aside {
  height: 50px;
  line-height: 50px;
  width: 100px;
  background: skyblue;
  float: left;
  margin-right: -100px;/*重要属性，这个值是侧栏的宽度*/
  position: relative;
  right: -10px;/*重要属性，这个值是自身离其它div的间隙，即10px*/
}

  左边固定宽度：

.box2 {
  clear: both;
  overflow: hidden;
  padding-left: 110px;/*重要属性，这个值是侧栏的left值*/
}
.box2 .aside {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性，设置-100%就能和内容栏同一行并覆盖内容栏*/
  position: relative;
  left: -110px;/*重要属性，该值是自身宽度与间隙之和*/
}
.box2 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

增加一个：只需要简单的几个属性就能达到这种效果：

html：

<div class="box1">
    <div class="aside">
        侧栏固定宽度
    </div>    
    <div class="main">
        内容自适应宽度
    </div>    
</div>

 

css：

.aside{
  width:100px;
  float:left;    
}
.main{
 margin-left:100px; //这个值是aside的宽度
}

　　这一个是利用了float破坏流动性，使得div浮在页面上，后边的内容自动挤到最左边，然后设置右边div的margin值就能达到：左边固定宽度，右边自适应宽度的效果。同样，利用float破坏流动性的特点，也可以实现右边固定，左边自适应。

 

总结：如果固定宽度div在左边，那么它就设置margin：-100%，left值就设置比它宽度大的值，比如上面的left：-110，这样就有10px的间隙，然后装它们的盒子设置padding-left，这个的值和固定宽度div的left值相等。内容栏除了浮动和宽度100%，其它的都不用设置。固定宽度的div在右边的时候，就把left，margin-left，padding-left改成right，margin-right，padding-right就可以了。

 

2.两个固定宽度，一个自适应宽度

HTML：

<div class="box1">
    <div class="main">
        内容自适应宽度
    </div>
    <div class="aside1">
        侧栏1固定宽度
    </div>
    <div class="aside2">
        侧栏2固定宽度
    </div>
</div>

  这三种情况的HTML排版顺序也是一样的。

CSS：
两个固定宽度div都在右边：

.box1 {
  clear: both;
  overflow: hidden;
  padding-right: 240px;/*重要属性，这个值是两个侧栏宽度加每个的间隙的值，这里间隙每个是10px，所以100+120+10+10=240*/
}
.box1 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -100px;/*重要属性，这个值是该div的宽度*/
  position: relative;
  right: -10px;/*重要属性，这个值是自身间隙即10px*/
}
.box1 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要属性，这个值是该div的宽度*/
  position: relative;
  right: -120px;/*重要属性，这个值是该div左边的div的宽度与间隙，加上自身间隙的值，即100+10+10=120，不要理解为自身的宽度哦*/
}
.box1 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

  两个固定宽度都在左边：

.box2 {
  clear: both;
  overflow: hidden;
  padding-left: 240px;/*重要属性，这个值是两个div宽度与间隙之和*/
}
.box2 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性，设置-100%能让该div和内容块成一行并覆盖*/
  position: relative;
  left: -240px;/*重要属性，这个值是padding-left的值*/
}
.box2 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性，设置-100%能让该div和内容块成一行并覆盖*/
  position: relative;
  left: -130px;/*重要属性，这个值是padding-left减去最左边div宽度与间隙的值*/
}
.box2 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

 一个固定宽度在左，一个固定宽度在右。自适应宽度在中间。

.box3 {
  clear: both;
  overflow: hidden;
  padding: 0 130px 0 110px;/*重要属性，这个值是左右两边div的宽度*/
}
.box3 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性*/
  position: relative;
  left: -110px;/*重要属性，这个值是自身宽度加上间隙*/
}
.box3 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要属性，这个值是自身宽度*/
  position: relative;
  right: -10px;/*重要属性，这个值是自身离其它div的间隙*/
}
.box3 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

 　　总结：两个div固定宽度的情况，还是只操作固定宽度的div，自适应宽度的不管它。在左边的div就设置margi-left：-100%，left就是宽度与间隙的值；右边的就设置margin-right：负自身宽度，相对定位的right就是宽度与间隙的值。

 

 3.多个固定宽度，一个自适应宽度

 

HTML：

<div class="box1">
    <div class="main">
        内容自适应宽度
    </div>
    <div class="aside1">
        侧栏1固定宽度
    </div>
    <div class="aside2">
        侧栏2固定宽度
    </div>
    <div class="aside3">
        侧栏3固定宽度
    </div>
</div>

三种情况的HTML排版顺序也一样。

CSS：

三个固定宽度div在最右边，自适应宽度div在左边

.box1 {
  clear: both;
  overflow: hidden;
  padding-right: 390px;/*重要属性，该值是每个div宽度与间隙之和*/
}
.box1 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -100px;/*重要属性，该值是该div的宽度*/
  position: relative;
  right: -10px;/*该值是自身离其它div的间隙*/
}
.box1 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要属性，该值是该div的宽度*/
  position: relative;
  right: -120px;/*该值是该div的左边div宽度与间隙，加上自身间隙的值，即100+10+10=120*/
}
.box1 .aside3 {
  width: 140px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -140px;/*重要属性，该值是该div的宽度*/
  position: relative;
  right: -250px;/*该值是该div的左边div宽度与间隙，加上自身间隙的值，即100+10+120+10+10=250*/
}
.box1 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

两个固定宽度div在最左边，另一个在最右边，自适应宽度div在最中间

.box2 {
  clear: both;
  overflow: hidden;
  padding: 0 150px 0 240px;/*重要属性，左边的padding是两个div的宽度与间隙之和，右边的是一个div宽度与间隙之和*/
}
.box2 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性*/
  position: relative;
  left: -240px;/*重要属性，由于该div是在最左边的，所以left值是padding的left的值*/
}
.box2 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性*/
  position: relative;
  left: -130px;/*重要属性，该值是padding的left的值减去最左边的div宽度与间隙的值*/
}
.box2 .aside3 {
  width: 140px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -140px;/*重要属性，该值是该div宽度与间隙的值*/
  position: relative;
  right: -10px;/*重要属性，由于设置了margin-right之后，该div到了最右边，所以这里的right值是间隙值*/
}
.box2 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

一个固定宽度div在左边，另外两个在最右边，自适应宽度在中间

.box3 {
  clear: both;
  overflow: hidden;
  padding: 0 280px 0 110px;/*重要属性，padding的right值是右边两个div宽度与间隙的和；padding的left值是左边的div宽度与间隙的和*/
}
.box3 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性*/
  position: relative;
  left: -110px;/*重要属性，该值是该div宽度与间隙的值*/
}
.box3 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要属性，该值是该div宽度*/
  position: relative;
  right: -10px;/*重要属性，由于设置了margin-right，所以该值是间隙值*/
}
.box3 .aside3 {
  width: 140px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -140px;/*重要属性，该值是该div宽度*/
  position: relative;
  right: -140px;/*重要属性，该值是它紧邻的左边的div的宽度与间隙还有自身与div间隙的和，即120+10+10=140*/
}
.box3 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}

 　　总结：多个div固定宽度，一个自适应的布局方式和两个固定宽度，一个自适应的布局方式也是同样的原理，只操作固定的div，自适应的不管，然后设置装它们的盒子的padding值。固定宽度div设置相对定位的left或者right值，设置margin-left或者margin-right的值。

 

　　圣杯布局最终总结：

　　1.HTML排版都是自适应div在最前面，然后是固定宽度div。

　　2.都设置float：left。

　　3.如果div在左边，则该div设置margin-left：-100%。如果div在右边，则该div设置margin-right：负自身宽度

　　4.在左边的div设置相对定位的left值，如果是一个div，则该值是padding-left的值，也就是该div宽度与间隙之和的负值。如果左边是多个div，那么当前div的left值就是它右边所有的div的宽度与间隙的和再加上自身的宽度与间隙的值的负值。

　　5.在右边的div设置相对定位的right值，该值是自身的间隙的负值。如果右边是多个div，那么当前div的right值就是它左边所有的div的宽度与间隙的和再加上自身的间隙的值的负值。

　　6.这些div的外层的大盒子设置padding值，这个值是左边或者右边div的宽度与间隙的和。例如左边一个固定宽度的div，宽度为50，间隙是15；然后右边两个固定宽度的div，宽度分别是80、100，间隙都是10.那么padding值就应该设置为padding：0 200px 0 65px;

　　7.自适应div的宽度设置为100%，其它的都不用管。

 

标签
SkyBlue
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!