CSS完成3栏合理布局的4种方式示例

日期:2021-01-20 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

序言

实际上无论是3栏合理布局還是两栏合理布局全是大家在平常新项目里常常应用的,或许你不知道道甚么事3栏合理布局甚么是两栏合理布局但具体早已在用,也许你了解3栏合理布局的1种或两种方式,但具体实际操作中也只会依靠那某1种方式,本文实际的详细介绍了3栏合理布局的4种方式,并详细介绍了它的应用情景。

所谓3栏合理布局便是指网页页面分成左中右3一部分随后对正中间1一部分做自融入的1种合理布局方法。

1.肯定精准定位法

HTML编码以下:

<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>

CSS编码以下:

//简易的开展CSS reset
body,html{
    height:100%;
    padding: 0px;
    margin:0px;
}
//上下肯定精准定位
.left,.right{
    position: absolute;
    top:0px;
    background: red;
    height:100%;
}
.left{
    left:0;
    width:100px;
}
.right{
    right:0px;
    width:200px;
}
//正中间应用margin空出上下元素所占有的室内空间
.main{
    margin:0px 200px 0px 100px;
    height:100%;
    background: blue;
}

该方式有个显著的缺陷,便是假如正中间栏含有最少宽度限定,或是含有宽度的內部元素,当访问器宽度小到1定水平,会产生层重合的状况。

2. 圣杯合理布局

HTML编码以下:

//留意元素顺序
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>

CSS编码以下:

//习惯性性的CSS reset
body,html{
    height:100%;
    padding: 0;
    margin: 0
}
//父元素body空出上下栏位
body {
    padding-left: 100px;
    padding-right: 200px;
}
//左侧元素变更
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: ⑴00%;
    position: relative;
    left: ⑴00px;
    height: 100%;
}
//正中间一部分
.main {
    background: blue;
    width: 100%;
    height: 100%;
    float: left;
}
//右侧元素界定
.right {
    background: red;
    width: 200px;
    height: 100%;
    float: left;
    margin-left: ⑵00px;
    position: relative;
    right: ⑵00px;
}

有关解释以下:

      (1)正中间一部分必须依据访问器宽度的转变而转变,因此要用100%,这里设左中右向左波动,由于正中间100%,左层和右层压根沒有部位上去

      (2)把左层margin负100后,发现left上去了,由于负到出对话框没部位了,只能往上挪

      (3)按第2步这个方式,能够得出它要是移动对话框宽度那末宽就可以到最左侧了,运用负边距,把上下栏精准定位

      (4)但因为上下栏遮挡住了正中间一部分,因而选用相对性精准定位方式,各有相对自身把自身挪出去,获得最后結果

3. 双飞翼合理布局

HTML编码以下:

<div class="main">
    <div class="inner">
        Main
    </div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>

CSS编码以下:

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
body {
    /*padding-left:100px;*/
    /*padding-right:200px;*/
}
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: ⑴00%;
    height: 100%;
    /*position: relative;*/
    /*left:⑴00px;*/
}
.main {
    background: blue;
    width: 100%;
    float: left;
    height: 100%;
}
.right {
    background: red;
    width: 200px;
    float: left;
    margin-left: ⑵00px;
    height: 100%;
    /*position:relative;*/
    /*right:⑵00px;*/
}
//新增inner元素
.inner {
    margin-left: 100px;
    margin-right: 200px;
}

圣杯合理布局具体看起来是繁杂的后期维护保养性也并不是很高,在淘宝UED的讨论下,出来了1种新的合理布局方法便是双飞翼合理布局,编码如上。提升多1个div便可以无需相对性合理布局了,只用到了波动和负边距。和圣杯合理布局差别的地区早已被注解。

4. 波动

HTML编码以下:

//留意元素顺序
<div class="left">Left</div>
<div class="right">Right</div>
<div class="main">Main</div>

CSS编码以下:

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
//左栏左波动
.left {
    background: red;
    width: 100px;
    float: left;
    height: 100%;
}
//正中间自融入
.main {
    background: blue;
    height: 100%;
    margin:0px 200px 0px 100px;
}
//右栏右波动
.right {
    background: red;
    width: 200px;
    float: right;
    height: 100%;
}

这类方法编码充足简约与高效率,也非常容易了解

总结

以上便是这篇文章内容的所有內容了,4种方式实际上仅有圣杯合理布局和双飞翼合理布局较难了解,但具体上了解了圣杯合理布局,双飞翼合理布局当然就了解了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,如有疑惑大伙儿能够留言沟通交流。