DIV CSS:网页页面1行多列情况自融入

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

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


网页页面合理布局中常有的1种状况便是网页页面行为主体一部分分为1行多列;而在许多种状况下,设计方案师们常把上下多列的情况色设计方案成不一样颜色,以完成內容块的显著区别;但这样的设计方案给合理布局提出了1个看似简易,而完成十分难的难题;那便是上下多列如何完成情况高宽比自融入,及左侧內容高于右侧时,右侧情况色也要和左侧1样;右侧內容高于左侧时,左侧情况色也要和右侧1样;
当年以便完成这个,我在网络上查过无数的文章内容,都沒有很好的处理计划方案;大部分人用很大的负数完成,也是有人用javascript完成; 后来由于觉得这样完成不符合理,因此我1直用报表来完成; 由于这样最简易; 但今日朋友问起我这个难题,我下午细心想了想;想出了1个处理方法,写出来和大伙儿共享;
基础标准:
1、合理布局要有效,不可以以便完成这样的实际效果而使html的编码变得臃肿;
2、CSS一部分也要简易恰当完成,不可以以便这样的实际效果而写很多的编码;而关键的還是访问器适配层面要沒有难题;
下列是我完成的编码,表明1下,这样的合理布局还并不是很理想化;但这已经是我临时能想起的最好是处理方法了;
完成方式1:左侧用边框,右侧用情况色;
这个方式是左侧用200PX的边框来完成1列的情况,再用这个标识的具体情况色来完成另外一列的情况,这样上下始终全是1样高的;
程序流程编码
<div id="box">
<div id="right">right <br /> right</div>
<div id="left">left</div>
<div style="clear:both"></div>
</div>
程序流程编码
<style>
/*这1行将会无需看,是空话,以便漂亮1点*/
*{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;}
/*最外边的1个盒子,左侧框200PX,有情况色*/
#box{ background:#FFCC00;width:700px; border-left:200px solid #FF9900;}
/*让左侧的1列向左挪动200PX*/
#left{margin-left:⑵00px; width:200px; position:static;}
/*因为IE和FIREFOX有差别,因此对IE加了1行作解决*/
* html #left{position:fixed;}
/*右侧的宽度,这里我为何沒有写700PX;说真话,我确实沒有想搞清楚;这里数最多只能写900⑵00⑵=698PX;但这在应用全过程中,其实不会有危害;*/
#right{float:right; width:695px;}
</style>
演试实际效果:

[Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作]

方式1存在1个难题:便是假如左侧的情况是1张图如何办?对,假如是单色,那末沒有难题;假如是1张图,就沒有方法了;因此我写了第2种处理方法;
完成方式2:用嵌套循环完成多列情况;这个方式我本人强烈推荐应用;
程序流程编码
<div id="box">
<div id="content">
<div id="right">right <br />right</div>
<div id="left">left</div>
</div>
</div>
CSS一部分我无需解释了吧!
程序流程编码
<style>
*{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;}
#box{ background:#FFFF66;width:700px; padding-left:200px; float:left;}
#content{ background: #FF6600; float:left;}
#right{ width:695px; float:right;}
#left{ width:200px; margin-left:⑵00px; position:static; float:left;}
* html #left{position:fixed;}
</style>
演试实际效果:

[Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作]