全国服务热线:4008-888-888

技术知识

css完成右边固定不动宽度 左边宽度自融入

反过来还可以:左边宽度固定不动,右边自融入。无论是左是右,总之便是1边宽度固定不动,1边宽度自融入。

这类合理布局较为普遍,blog园许多默认设置主题便是这类。1般状况下,这类合理布局中宽度固定不动的地区是侧面栏,而自融入的地区是行为主体內容区——坚信把侧面栏搞成自融入的人非常少吧?

要完成这类合理布局,也算较为简易。大家先得出html构造:

<div id="wrap">
  <div id="sidebar" style="height:240px;">固定不动宽度区</div>
  <div id="content" style="height:340px;">自融入区</div>
</div>
<div id="footer">后边的1个DIV,以保证前面的精准定位不容易致使后边的形变</div>

编码中的#wrap的div,是用来包裹大家要精准定位的这两个区的;他后边也有个#footer,用来检测在前面的精准定位搞定后会不容易致使后边的div移位——假如移位了,那证实大家的精准定位方式务必改善。

下面例举几个普遍的方式:

1,固定不动宽度区波动,自融入区不设宽度而设定 margin

大家拿右侧定宽左侧自融入来做示范性,CSS编码以下:

#wrap {
    overflow: hidden; *zoom: 1;
  }
  #content ,#sidebar {
    background-color: #eee; 
  }
  #sidebar {
    float: right; width: 300px;
  }
  #content {
    margin-right: 310px;
  }
  #footer {background-color: #f00;color:#fff; margin-top: 1em}

在其中,sidebar让他波动,并设定了1个宽度;而content沒有设定宽度。

大伙儿要留意html中务必应用div标识,不必企图应用甚么p标识来做到目地。由于div有个默认设置特性,即假如不设定宽度,那他会全自动铺满他的父标识的宽度。这里的content便是事例。

自然大家不可以让他铺满了,铺满了他就不可以和sidebar维持同1行了。大家给他设定1个margin。因为sidebar在右侧,因此大家设定content的margin-right值,值比sidebar的宽度大1点点——便于区别她们的范畴。事例中是310.

假定content的默认设置宽度是100%,那末他设定了margin后,他的宽度就变为了100%⑶10,此时content发现自身的宽度能够与sidebar挤在同1行了,因而他就上来了。

而宽度100%是相对他的父标识来的,假如大家更改了他父标识的宽度,那content的宽度也就会变——例如大家把访问器对话框变小,那wrap的宽度就会缩小,而content的宽度也就缩小——但,他的具体宽度100%⑶10自始至终是不容易变的。

这个方式看起来很完善,要是大家记得消除波动(这里我用了最简易的方式),那footer也不容易移位。并且不管content和sidebar谁更长,都不容易对合理布局导致危害.

但具体上这个方式有个很老火的限定——html中sidebar务必在content以前!

但我必须sidebar在content以后!由于我的content里边才是网页页面的关键內容,我不想关键內容反而排在主次內容后边。

但假如sidebar在content以后,那上面的1切都会化为乌有。

将会有的人没理解,说你干吗非要sidebar在后边呢?这个难题说来话长,总之难题便是——content务必在sidebar以前,但content宽度要自融入,如何办?

下面有两个方法,但是大家先把html构造改为大家要想的模样:

<div id="wrap">
  <div id="content" style="height:340px;">自融入区,在前面</div>
  <div id="sidebar" style="height:240px;">固定不动宽度区</div>
</div>

2,固定不动宽度区应用肯定精准定位,自融入区照样子写一写设定margin

大家把sidebar丢掉,只对content设定margin,那末大家会发现content的宽度就早已变为自融入了——因而content对sidebar说,我的宽度,与你不相干。

content很非常容易就搞定了,此时看来看sidebar,他不得已抛下了float。大家看来看sidebar的特性:在右侧,宽度300,他的精准定位对content不危害——很显著,1个肯定现实主义分子结构诞生了。

因而大家的css以下:

#wrap {
    *zoom: 1; position: relative;
  }
  #sidebar {
    width: 300px; position: absolute; right: 0; top: 0;
  }
  #content {
    margin-right: 310px;
  }

这段css中要留意给wrap再加了相对性精准定位,以防sidebar太肯定了跑到全部网页页面的右上角而并不是wrap的右上角。

仿佛进行了?在沒有看footer的主要表现时,我很高兴。大家来把sidebar加长——提高100px!不必1年,要是1条内裤!哦,,,要是1句编码。

可是,footer如何還是在那儿呢?如何沒有全自动往下走呢?footer说——我不给肯定现实主义者让位!

实际上这与footer不相干,而是由于wrap对sidebar的疏忽导致的——你再长,我還是没觉得。

来看这类精准定位方法只能考虑sidebar自身,但对他的弟兄们却没什么好处。

3,float与margin齐上阵

历经前面的经验教训,大家再次确立了这个自融入宽度合理布局务必要达到的标准:

  • sidebar宽度固定不动,content宽度自融入
  • content要在sidebar以前
  • 后边的元素要能一切正常精准定位,不可以受危害

因为肯定精准定位会让别的元素疏忽他的存在,因此肯定精准定位的方法务必抛下。

假如content和sidebar1样,都用float,那content的自融入宽度就没戏了;假如不给content加float,那sidebar又会跑到下1行去。

因此,最后我决策:float与margin都用。

我准备把content的宽度设为100%,随后设定float:left,最终把他向左挪动310,便于于sidebar能挤上来。

但这么1来content里边的內容也会跟随左移310,致使被遮挡住了,因此大家要把他再次挤出来。以便好挤,我用了1个附加的div包裹住內容,因此html构造变为了这类模样:

<div id="wrap">
  <div id="content" style="height:140px;">
    <div id="contentb">
      content自融入区,在前面
    </div>
  </div>
  <div id="sidebar" style="height:240px;">sidebar固定不动宽度区</div>
</div>

css则变为这样:

#sidebar {
    width: 300px; float: right;
  }
  #content {
    margin-left: ⑶10px; float: left; width: 100%;
  }
  #contentb {
    margin-left: 310px;
  }

这样1改,真实的“content”就变为了contentb,他的宽度跟之前的content1样,是100%⑶10.

大伙儿将会留意到了编码中的两个margin-left,1个⑶10px1个310px,最终融合起来非常于甚么都没干,着实蛋疼。但他的确处理了content与sidebar的次序难题。

这个方式的缺陷便是:太奇异,和附加多了1层div。

4,规范访问器的方式

自然,以不折腾人为因素规范的w3c规范早就为大家出示了制做这类自融入宽度的规范方式。那就简易了:把wrap设为display:table并特定宽度100%,随后把content+sidebar设为display:table-cell;随后只给sidebar特定1个宽度,那末content的宽度就变为自融入了。

编码非常少,并且不容易有附加标识。但是这是IE7都失效的方式。

———————割尾巴————————-

假如不考虑到ie7及下列版本号,则应用规范方式;假如不在乎sidebar与content的次序,则用第1种方式;不然用第3种方式。

以上编码都没在IE6检测,有难题不负责解释。本人感觉,让IE6与世长辞的方法便是——从此已不理他。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服