百分比和固定宽度的混合布局
2008-07-16 14:12
369 查看
今天准备做下载站的分类策划,在网上逛的时候,逛到了微软下载中心这个网站。感觉很不错,做得简洁大方。平时有个小嗜好,就是看看网页是怎样布局的,于是用firefox
的web developer插件,将浏览器窗口调小,当分辨率调到800*600时,水平方向依然没有出现滚动条。而网页的主要内容区都没有缩小,只是原来右边的空白部分没有了。以前在书上看过,有的设计师通过js检测浏览器窗口的来改变布局。是不是也是通过js实现的呢。还是还是通过css的百分比布局就能实现呢。
于是,用firebug查看它的首页,一看,网页里用了很多的表格。网页的主要部分都是用表格布局的。我就想,作为微软这样知名的公司。为什么在现在这个css已经成为一种广泛使用的语言而仍然使用如此广受批评的表格布局呢。是不是要实现这种布局效果用css比较难以实现呢。
“用表格能实现的,用css一定能实现,用css能实现的,用表格不一定能够实现”一直记着这句话。于是,我产生了一种用css将微软下载中心首页重写一遍的想法。下面是我重写的方案:
头部:我用一个id为hd的div包围了三个子div三个div分别是从上到下的三层。然后将对每一个子块的元素分别设向左、向右浮动。并设固定像素的宽度。就能实现
中部:左边的侧栏和右边的主要内容栏。侧栏的宽度是固定的181px。而主要内容栏要实现铺平整个浏览器窗口的话,必须设百分比或em宽度,一般是百分比。
尾部:用一个宽度为100%的div就可以了。
问题抽出来了,就是怎样实现百分比和固定宽度布局的问题:
html可简化为:
<div id=”content”>
<div id=”s_content”>s_content
</div>
<div id=”m_content”>m_content
</div>
</div>
设一下简单的css样式:
如果这样的话,根本不可能实现s_content和m_content在同一水平线上。难道把#m_content的width属性设为:100%-180px?在ie6和firefox2下都相当于没有设定#m_content属性一样。当然,如果不设定m_content的width,当m_content里的内容宽度小于窗口右侧的宽度时,可以在一条水平线上。如果大于的话,ie6会自动撑开m_content,firefox2中虽然不撑开,但是内容会跑到外面去。这都不是我们想要的。
这时,表格的作用就能够发挥出来了。将原来的html代码改为如下:
<div id=”content”>
<table width="100%">
<tr><td width="180px">
<div id="s_content">
s_content
</div>
</td>
<td width="100%">
<div id="m_content">
m_content
</div>
</td>
</tr>
</table>
</div>
这样,不管你的显示器分辨率是多少,网页都能填满整个宽度。而s_content的宽度是固定的。当然这只是使用表格实现固定宽度和百分比的原理。
的web developer插件,将浏览器窗口调小,当分辨率调到800*600时,水平方向依然没有出现滚动条。而网页的主要内容区都没有缩小,只是原来右边的空白部分没有了。以前在书上看过,有的设计师通过js检测浏览器窗口的来改变布局。是不是也是通过js实现的呢。还是还是通过css的百分比布局就能实现呢。
于是,用firebug查看它的首页,一看,网页里用了很多的表格。网页的主要部分都是用表格布局的。我就想,作为微软这样知名的公司。为什么在现在这个css已经成为一种广泛使用的语言而仍然使用如此广受批评的表格布局呢。是不是要实现这种布局效果用css比较难以实现呢。
“用表格能实现的,用css一定能实现,用css能实现的,用表格不一定能够实现”一直记着这句话。于是,我产生了一种用css将微软下载中心首页重写一遍的想法。下面是我重写的方案:
头部:我用一个id为hd的div包围了三个子div三个div分别是从上到下的三层。然后将对每一个子块的元素分别设向左、向右浮动。并设固定像素的宽度。就能实现
中部:左边的侧栏和右边的主要内容栏。侧栏的宽度是固定的181px。而主要内容栏要实现铺平整个浏览器窗口的话,必须设百分比或em宽度,一般是百分比。
尾部:用一个宽度为100%的div就可以了。
问题抽出来了,就是怎样实现百分比和固定宽度布局的问题:
html可简化为:
<div id=”content”>
<div id=”s_content”>s_content
</div>
<div id=”m_content”>m_content
</div>
</div>
设一下简单的css样式:
如果这样的话,根本不可能实现s_content和m_content在同一水平线上。难道把#m_content的width属性设为:100%-180px?在ie6和firefox2下都相当于没有设定#m_content属性一样。当然,如果不设定m_content的width,当m_content里的内容宽度小于窗口右侧的宽度时,可以在一条水平线上。如果大于的话,ie6会自动撑开m_content,firefox2中虽然不撑开,但是内容会跑到外面去。这都不是我们想要的。
这时,表格的作用就能够发挥出来了。将原来的html代码改为如下:
<div id=”content”>
<table width="100%">
<tr><td width="180px">
<div id="s_content">
s_content
</div>
</td>
<td width="100%">
<div id="m_content">
m_content
</div>
</td>
</tr>
</table>
</div>
这样,不管你的显示器分辨率是多少,网页都能填满整个宽度。而s_content的宽度是固定的。当然这只是使用表格实现固定宽度和百分比的原理。
相关文章推荐
- 百分比和固定宽度的混合布局
- 总结css实现固定和自适应宽度混合的多栏布局实现方法
- 使用CSS创建固定宽度的布局
- 如何用纯CSS布局两列,一列固定宽度,另一列自适应?
- CSS三栏布局——中间固定两边自适应宽度
- 右边固定宽度左边自适应宽度的两列布局方法
- CSS基础篇--css实现两列布局,一列固定宽度,一列宽度自适应方法
- 如何修改布局组件宽度设置固定值,在代码中动态修改
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
- css3实现百分比宽度减固定宽度展现
- CSS实现左侧固定宽度右侧自适应的固比布局
- 固定宽度布局的列背景色设置
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
- 通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- CSS-左侧固定宽度,右侧自适应宽度的两列布局实现方法总结
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- CSS网页布局入门教程4:二列固定宽度
- CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)
- web前端学习笔记(CSS固定宽度布局)
- DIV+CSS 页面布局--固定宽度且居中的版式