三栏布局,中间自适应!

原创 2011年01月14日 09:46:00

一直对此没加以重视,因为自适应从实际上说只是流向的问题。今天写的时候方才发现,原来问题还有这么多。

这个解决方案的思路差不多了,但是貌似在不同浏览器下依然有些问题

 

增加了一个固定底部,因为需求是这样的。这个解决方案之前的QQ广告栏已经说明了。

其实问题在于布局的时候left --- right --- center这个布局顺序是至关重要的。

因为先浮动好2个div之后才能让center有目的的流动到空隙里去

如若不然,right必将下来。

html--三栏布局(两边固定宽度,中间自适应)

一、绝对定位法:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 #left{ width: 180px;...

css学习笔记之三栏布局及中间栏自适应

下面记录我所了解的三栏自适应布局。 1.margin负边距 3 column adaptive_1 html,body{ ...

前端经典三栏布局,中间自适应。

首先第一种我们常用的float方法 需要注意的是该方法的中间部分center要放在right盒子之后。 html *{ padding:0; ma...

CSS三栏布局——中间固定两边自适应宽度

转自:W3CPLUS 今天与几位朋友一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用...

CSS实现中间自适应的三栏布局,共4种方法

一、float实现 html结构: css: .left,.right{ width: 200px; height: 300px; background-color: red; } .lef...

CSS三栏布局(两边固定中间自适应宽度)的方法

在讲这种布局之前,我还想和大家一起回想一下三列布局中的另一种,就是左右两列固定、中间自适应宽度。这种布局方法,网上问问G爸和度娘一定会有一大堆,但我还是要重复说说,方便自己今后查阅,记性太差,没办法。...
  • zxphwz
  • zxphwz
  • 2015年09月03日 13:15
  • 586

CSS三栏布局(两边固定中间自适应宽度)的方法

-   在讲这种布局之前,我还想和大家一起回想一下三列布局中的另一种,就是左右两列固定、中间自适应宽度。这种布局方法,网上问问G爸和度娘一定会有一大堆,但我还是要重复说说,方便自己今后查...

实现三栏布局中间自适应

前两天看到一个面试题,说是让实现三栏布局,中间的自适应,如下图所示: 其实挺简单的,但是换下顺序,有好多人就懵逼了,包括我。。。。这里我总结两种方法来实现: 第一种~定位法:(css代码) *{...

三栏布局(两边固定,中间自适应)

大家理解起来应该没有什么困难,其实三栏式布局和两栏式是相同的,下面我讲一个最简单的三栏布局制作方法。 DivCss布局二--三栏布局 来源:黄超 [点击放大] 请看上面...
  • judyge
  • judyge
  • 2015年11月16日 22:33
  • 297

百度前端学院任务三——三栏式布局(中间宽度自适应)

前言:最近在写百度前端学院的题目,打算这个星期快速得把第一阶段的任务过一遍。三栏式布局可以有两种写法,用float或者用position 方法一:使用float属性 注意...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:三栏布局,中间自适应!
举报原因:
原因补充:

(最多只允许输入30个字)