CSS 3栏等高合理布局完成方式

日期:2020-12-13 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

最先,3栏等高合理布局,说白了,能够归纳为下列特点:
1、3列(傻子也了解)
2、这3列高相同
3、这3列的高宽比并不是固定不动不会改变,而是伴随着內容的转变而转变

Step 1:
xhtml编码:

<div id="header">#header</div>     
<div id="container">            
    <div id="main" class="column">#main</div>            
    <div id="left" class="column">#left</div>            
    <div id="right" class="column">#right</div>     
</div>
<div id="footer">#footer</div>

关键构造式#container的div,至于#header和#footer,彻底是以便让它可以更像网页页面1些,返回#container,它內部包括3列,在其中main里包括的是1个网页页面最关键,最关键的內容,因此大家不可以懈怠,在纯xhtml的流文本文档中,访问器是从上到下分析的,故关键的內容应当放在较为靠前的部位,这是由检索模块的权重决策的吧,可是视觉效果上,大家待会儿会把它放到正中间。

思索1下:这3列如何将会在沒有写死高宽比的情况下还智能化的并驾齐驱呢?
实际上不写死高宽比确实不可以办到智能化的并驾齐驱,那如何写死高呢,回答便是,运用盒实体模型,写它的padding,这是1种超级变态的方式,但挺见效,就如同1本人 仅有具体仅有170cm,可是算上20cm的秀发,天啊,他早已是190cm了,還是先得出处理方式吧:便是运用padding-bottom和margin-bottom;

Step2:

#container {
    background-image: url('bg.gif');
    width: 960px;
    margin: 0 auto;
}
#main{float: left: width: 500px;background-color: #e5e5e5;}
#left{float: left: width: 300px;background-color: #7bd;}
#right{float: right: width: 160px;background-color: #f63;}

Step3:

#container .column{
    padding-bottom: 32767px;
    margin-bottom: ⑶2767px;
}

这1步应当算是本主题的关键,至于32767 这个数你能够了解成“充足大”,便于于有充足的室内空间去拓展它的盒子,这么高应当是超大型巨人症吧,没事儿,大家能够用margin-bottom的负值去掩藏它,这个技能,我认为,我真的解释不清晰,有句古话: 会意,言传!  你要是试一试,就会领悟到在其中的奥秘。下边这幅图对你的了解应当有协助:

到了这步,你会发现这3列的盒实体模型为32767px,此时你要在父元素上加:overflow: hidden;自然IE6.0是:zoom:1;

#container  {
    background-image: url('bg.gif');
    width: 960px;
    margin: 0 auto;
    overflow: hidden;    
}

Step4:
如今#main的视觉效果实际效果是在最左栏,大家要想方法把它搞成正中间
思路:先把#main排到正中间,大家能够#main{margin-left:300},这时候,#left被挤到800px的部位,在#left{margin-left:⑻00px;}就可以搞定,可是啊,IE6这个贱货,确实是无语,只得再次思索了。

1般的,在css做合理布局时,有几种思路,1种是float,1种是精准定位,有关精准定位的话,不熟习的google1下就行,提1下:position: relative;的这个特性,假如不指明top,left的话,它的视觉效果实际效果不容易更改。
因此,以便让#main在视觉效果实际效果上有一定的提升,那末务必指明top或left,在这里只必须指明left就可以了,

#main {
    float: left;
    background-color: #e5e5e5;
    width: 500px;
    left: 300px;
}
#left {
    float: left;
    background-color: #7bd;
    width: 300px;
    left: ⑸00px;
}

实际上在这正中间,也有1个定义是较为关键的,#main,#left有了position:relative之后,就有了层的定义,因此当#main{left:300px}后,#left早已单独出来了,不容易被挤到800px的部位了,故:之必须left:⑸00px就可以做到左侧,500是#main的宽。
最终考虑到的是向下适配,
出示1段编码:

尽管写了这么多,可是你可以做,其实不意味着你应当这么做,这是1个战术和发展战略的难题,下列是我本人想了解的:
我感觉1刚开始:

padding-bottom: 32767px;
margin-bottom: ⑶2767px;

这么大的值,在reflow环节会不容易很耗資源,而选用js来操纵她们的高宽比,会不容易来得更轻轻松松1些呢?

第1次写这类东东,觉得很繁杂,无论是构思上還是在語言表述上都還是很晦涩难懂的,期待大伙儿积极主动的纠正,期待能和更多的盆友来开展沟通交流,1层面是提升自身,另外一层面是推动小区的和睦和共享资源,尽1份自身甚少的能量。