DIV布局之三行三列左右两栏固定中间自适应

原创 2007年09月29日 09:30:00

忙了2个星期,终于有时间整理出下面这篇文章了,呵呵。

这个布局其实是在之前两个layout上的一个延伸,做了之前两个,再做一个这样的layout应该不会有什么问题滴,手法都差不多。

要使宽度会自适应,顾名思义,就是宽度是不固定的,随外容器变化而变化。而在使用div布局上,就有这么一个优点,div是自动适应容器宽度的。而我们这里要注意的问题仅仅是如何让左右两栏始终固定在原位置,简单点的方法当然就是用float浮动,可以看下面例子:

演示地址:http://www.doyoe.com/model/xhtmlcss/layout/3.htm

CSS部分:

body {
 font-family: Verdana, Arial;
 margin: 0;
 font-size: 12px;
}
#dyhead {
 margin-bottom: 5px;
 }
#dyleft {
 float: left;
 width: 200px;
 }
#dycenter {
 margin: 0 210px;
}
#dyright {
 float: right;
 width: 200px;
}
#dyfoot {
 margin-top: 5px;
 clear: both;
}
div {
 background-color: #eee;
 border: dotted 1px green;
}

先写#dyleft和#dyright两栏,避免#dycenter自动断行

XHTML部分:

<!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" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>Css Layout</title>
</head>
<body>
<div id="dyhead">头部(3列布局,左右两栏宽度固定,中间栏自适应宽度)</div>
<div id="dyleft">左栏固定宽度为200px</div>
<div id="dyright">右栏固定宽度为200px</div>
<div id="dycenter">中间自适应宽度</div>
<div id="dyfoot">底部</div>
</body>
</html>

希望有更多更好的layout经验的朋友多交流交流^_^

 原文地址:http://blog.doyoe.com/article.asp?id=11

相关文章推荐

【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)

以前在网上看到过,说这个问题是一道经典的笔试/面试题。当时在百度面试的时候果然就遇到过。昨天在兰亭的时候果然又遇到了。其实,这个题目确实考到了Css几个方面的很重要的基础知识。首先考到了定位中的方法中...

CSS-两侧固定宽度,中间自适应的三列布局

在实际开发中,左右两侧固定宽度,中间自适应的三列布局是经常能够遇到的,尤其是最近的一个项目中,属于微信公众号,移动端的网页。在部分页面中,就需要用到这种布局,我是采用flex布局来搞定的。为了总结一下...

【前端攻城狮之路】CSS三列布局——两侧固定宽度、中间自适应

先附上效果图: 实现思路: 1、创建一个 div 容器(content)来存放这三个色块 2、设置容器 position:relative,两侧div position:abso...

CSS_Layout三分栏__左右两栏宽度固定,中间自适应

CSS: body{ min-width:800px; } h1, h2, div p{ margi...

Flex布局实现圣杯布局,左右两列固定、中间列自适应的三列式布局

一、Flex主要解决两个问题:1、元素位置:由6个容器属性和2个项目属性控制6个容器属性 flex-direction flex-wrap flex-flow justi...

html 三列布局(两列固定宽度,一列自适应)

摘要:最近在做移动端页面布局,偶有心得,记录于此。

左右定宽,中间自适应,实现三列布局

左右定宽,中间自适应,实现三列布局

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

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

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

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

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

转自:W3CPLUS 今天与几位朋友一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV布局之三行三列左右两栏固定中间自适应
举报原因:
原因补充:

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