三栏布局,中间自适应!

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

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

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

 

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

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

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

如若不然,right必将下来。

CSS实现经典三栏布局(两侧定宽,中间自适应)

html代码: css代码: #left{ float: left; width:100px; height: 100px; ...
  • u013853928
  • u013853928
  • 2016年10月31日 23:58
  • 375

前端面试之两栏布局,左侧固定右侧自适应;三栏布局,左右定宽,中间自适应

左右布局:左边定宽、右边自适应, 1.1浮动方法,使第一个div浮动起来脱离文档流,下面的div自动向上 先看代码 body{margin:0;} //为了统一布局,去掉了浏览器自带body...
  • donggx
  • donggx
  • 2017年06月13日 15:14
  • 590

前端设计之CSS布局:上中下三栏自适应高度CSS布局

网页代码: CSS布局:上中下三栏自适应高度CSS布局 *{margin:0;padding:0;} body, html { margin: 0; padding:0 !import...
  • sinat_26342009
  • sinat_26342009
  • 2015年08月14日 16:09
  • 1408

自适应网页中3种三栏布局的用法

首先解释一下什么是“三栏布局”:顾名思义,三栏布局就是在网页上以平铺方式展现的左中右三列布局,其特点在于,左右两列可固定在网页左右两侧,中间一列永远居中,且当网页宽度大于左右两列宽度之和时,中间一列可...
  • Eason_Severus
  • Eason_Severus
  • 2016年12月14日 11:19
  • 739

css三栏布局,中间自适应

div 三栏布局,最外面的那层div宽度不固定,包裹着三个div,这三个div水平平铺,其中第一个div的宽度固定,第二个div自适应,第三个div的宽度为10%。 ...
  • wuqiuyude
  • wuqiuyude
  • 2015年03月08日 22:57
  • 346

使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

今天太累了,写不了了,先留着写。  1.css3之前       三种方法:圣杯布局 2 , css3新特性    多栏布局    弹性盒模型布局...
  • Cinderella_hou
  • Cinderella_hou
  • 2016年08月08日 22:04
  • 14521

CSS圣杯布局(三栏布局)

圣杯布局是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染。三栏全部float:left浮动,并配合left和right属性。 原理(1.浮动2.负边距): 负边距  m...
  • LadyZhong
  • LadyZhong
  • 2017年08月10日 15:53
  • 187

css经典布局——头尾固定高度中间高度自适应布局

下面说下要求: 1 头部固定高度,宽度100%自适应父容器; 2 底部固定高度,宽度100%自适应父容器; 3 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中间部分出...
  • qfgg3
  • qfgg3
  • 2016年06月30日 19:00
  • 605

淘宝双飞翼布局,两边固定中间自适应布局。中间内容先显示。

1、淘宝双飞翼的优点:     ①、重要的内容先加载;     ②、兼容目前所有的主流浏览器,包括IE6。     ③、方便整体样式修改,不同的布局框,可以通过调整.col-sub、.col-extr...
  • u013084331
  • u013084331
  • 2016年01月25日 11:55
  • 1121

两栏自适应布局

实现效果:一边固定,一边自适应
  • zhu_free
  • zhu_free
  • 2016年04月29日 10:58
  • 2366
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:三栏布局,中间自适应!
举报原因:
原因补充:

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