现在先来谈谈关于三行两列的布局[左栏固定,右栏自适应宽度]之一,我能想到比较好的办法是使用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漂浮,一样能很简单的实现。步骤:左栏依然如此,右栏不需要任何设定,效果依然为“左栏固定,右栏自适应宽度”。只是考虑到后面更复杂的东西,这样的表现会不大完美。就如,要清晰分开两栏就不易。』
分享到:
相关推荐
DIV+CSS+HTML布局(三行两列布局)
div宽度自适应布局(左边自适应)
div宽度自适应布局(右边自适应)
用DIV+CSS实现国内经典式三行两列布局,附图片
div+css模板布局 右侧固定,左侧自适应
布局很简单,左边一个div,右边一个div,中间的div是用来拖动的。 复制代码代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head...
div+css菜单导航布局自适应宽度,纯div+css
HTML实现2列布局,左侧宽度固定,右侧自适应 实现一: <style> body, html{padding:0; margin:0;} // 根据CSS定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-...
div+css布局 三行三列 中间自适应
DIV三列布局,宽度自适应(且最小宽度500px)
CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
html div 自适应剧中 上下左右全部居中
css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度
div布局-Jquery 收起左栏、全屏 布局页头、页尾还有中间部分。页头页尾固定高度,中间高度自由伸缩。中间部分又分为三列,左右两列宽度固定,中间一列宽度自由伸缩
CSS两列布局,右侧固定,左侧自适应宽度.
下面和大家一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用
需要实现横向两列布局:左列固定,右列自适应的效果,如下图: HTML代码: XML/HTML Code复制内容到剪贴板 <html> <head> <meta charset=UTF-8> <title>测试练习</title...
css边框背景阴影 DIV自适应宽度 背景色渐变、透明 多行自适应浏览器高度 圆角div 固定高度div,随内容自动变高css定义方法等等
脚本控制DIV三行三列布局自适应高度