[散分]DIV布局之三行两列左栏宽度固定右栏宽度自适应解决方法
发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
[散分]DIV布局之三行两列左栏宽度固定右栏宽度自适应
今天闲来无事,把以前的一些乱七八糟的东西整理了一下,有些可能有点用处,贴出来大家看看,借此机会散点分,好久没散分了(只接分,貌似不厚道^_^)
『在用DIV布局时,总会碰到各种各样的问题,有些还非常怪异,总之让人头大。不过当你找到了窍门,你就会把它当作是一门艺术来看待了,真的非常有趣。
现在先来谈谈关于三行两列的布局[左栏固定,右栏自适应宽度]之一,我能想到比较好的办法是使用margin漂浮法。
先说说要做成这件事,要做些什么,会碰到些什么问题。要让右栏自适应宽度,也就是说随着浏览器分辨率的不同而发生相应变化。同时左栏又如何做到固定在某个位置,而且宽度固定呢?很简单,只需要右栏从自身宽度里让出一些给左栏就行了,也就是预留出leftMargin,而右栏仍保持原来的性能自适应。现在就是如何让左栏固定在左边的问题了。大家都知道,让某块居左或居右可以通过float来解决,只需要选择其值为left或right,让该块浮动在某个位置就OK。
[演示地址:http://pysj.v-ec.com/model/xhtmlcss/layout/layout1.htm]
CSS部分:
body {
font-family: Verdana, Arial;
font-size: 12px;
margin: 0;
}
#dyhead {
margin-bottom: 5px;
}
#dyleft {
width: 200px;
float: left;
}
#dyright {
margin-left: 210px;
}
#dyfoot {
margin-top: 5px;
clear: both;
}
div {
color: #363636;
background-color: #eee;
border: 1px dashed #630;
}
以上的样式中,body没什么说,基本的一些定义;div总体的定义了一下所有div的背景色及边框样式;#dyhead定义头部以5px的间距和下面的内容分开;#dyfoot则和#dyhead相反,以5px的间距和上面的内容分开,只不过这里多用了一个clear,用于清除上面内容中使用float的影响;#dyleft定义了自身的宽,而且定义了float为left,就是为了使自己始终浮在左边;#dyright一目了然,margin-left为左栏预留了210px的空间,反观#dyleft只用了200px定义自身,剩下的10px自然就成了两栏之间的间距了。
HTML部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> Css Layout </title>
</head>
<body>
<div id= "dyhead "> 头部 </div>
<div id= "dyleft "> 左栏固定 <br /> 宽度为200px </div>
<div id= "dyright "> 右栏宽度自适应 </div>
<div id= "dyfoot "> 底部 </div>
</body>
</html>
以上就是使用margin漂浮法作出的[左栏固定,右栏自适应宽度]布局,为了区分开左右的位置,我预留了两栏之间的间隔为10px,当然这在真正做web的时候为了美观也是要的。在效果演示页面能看到,或者直接把以上代码拷到本地也行。整个布局十分简单,思路也比较清晰,希望有更好意见的朋友多多交流。
*题外话:其实这个布局不需要用到margin漂浮,一样能很简单的实现。步骤:左栏依然如此,右栏不需要任何设定,效果依然为“左栏固定,右栏自适应宽度”。只是考虑到后面更复杂的东西,这样的表现会不大完美。就如,要清晰分开两栏就不易。』
------解决方案--------------------
不错,继续努力!接分! ^_^
------解决方案--------------------
不错,收藏了
------解决方案--------------------
好
------解决方案--------------------
接分
------解决方案--------------------
多谢楼主,最近正在研究这个呢:)
------解决方案--------------------
接分有理
------解决方案--------------------
收下了....谢了啊
------解决方案--------------------
顶
------解决方案--------------------
:)
------解决方案--------------------
JF
------解决方案--------------------
感谢楼主的分享
------解决方案--------------------
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
CSS3的3D转换效果详解介绍
CSS3的3D转换效果详解介绍:
本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只...
-
HTML学习10:表单格式化
表单格式化,其实我也不想起这个名字的,在前面学习的HTML中有文本格式化,这次的表单和表੬...
-
CSS布局参考 IE的If条件注释使用备忘
内容提要:在CSS布局中,还常常用到IE Hack。if IE起着非常大的作用! 关键字:Div CSS IE Hack...
-
CSS3中动画transform必须要了解的Skew变化原理
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同...
-
控制非模态弹出框(showModelessDialog)唯一且随父页面关闭
网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两...
-
compass模块----Utilities----Sprites精灵图合图
css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能...
-
求前端大神帮我看下我这网站,到底是什么原因。除了ie7和火狐其他浏览器都没问题。
http://120.25.1.133/digger/index.php/Home/In...
-
各位是怎样解决屏幕的分辨率的问题的呢?
我的笔记本是15.6英寸的,我开发的网页在我的电脑上看起来比较好,但是我想换一个大的屏幕的...
-
css-----强大的效果
1 <div id="d1">你好 2 <span>aaaaaaaaa</span> 3 <div> 4 <span id="s1">bbbbbbbb</span> 5 ...
-
新手关于canvas的问题
html代码:<canvasid="canvas"></canvas>
js代码:
第一种:varcanvas=$("#canvas");
第二种:varcanvas=$("#canva...