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实现三栏自适应布局(两边宽度固定,中间自适应)

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

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

摘要:最近在做移动端页面布局,偶有心得,记录于此。
  • mika85489
  • mika85489
  • 2016年08月17日 21:13
  • 1682

轻松实现两栏布局:左右DIV等高、内容自适应屏幕高度

test body{ background:#ccc; overflow-y:scroll; } #wr...
  • malinjie66
  • malinjie66
  • 2013年07月12日 00:33
  • 1456

两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应)

两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应)
  • dq_pp
  • dq_pp
  • 2017年04月18日 14:34
  • 1058

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

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

上下Div固定,中间div高度自适应(随浏览器高度变化而变化)

1.css代码: html,body{ margin:0; padding:0; height:100%; overflow:hidden; } #top{ position:absol...
  • muyeju
  • muyeju
  • 2015年10月03日 15:56
  • 5039

两栏等高布局||两栏自适应高度

常用两栏等高布局三种方法 这里梳理一下三种常用的两栏等高布局方法,如有谬误,欢迎指正 -、margin-bottom和padding-bottom html hello hello h...
  • qq_35639964
  • qq_35639964
  • 2017年02月24日 14:43
  • 1086

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

做了一道猫厂很经典的前端笔试题,解决了一直以来在两列布局的认识上思考太少的毛病。 题目要求是右侧aside固定宽度200px,左侧content自适应。 本来直接用float,发现aside总是会...
  • qq846294282
  • qq846294282
  • 2016年12月20日 17:06
  • 1741

html div三列布局占满全屏(左右两列定宽或者百分比、中间自动适应,div在父div中居底)

参考文章:http://hi.baidu.com/alimyself/item/3aa6763d787cc7697c034b9d 参考文章:http://www.cnblogs.com/webmoon...
  • duyelang
  • duyelang
  • 2014年03月05日 17:48
  • 9686

三个div 两边固定大小中间自动大小

最近做公司一个项目,涉及到手机呈现页面,当时有个需求就是实现一个列表展示功能,左边是图片,中间标题文字介绍啥的,右边是操作按钮,想想很简单嘛,一分析搞三个div排一下,两边的固定宽度,中间的自动宽度,...
  • Goblin_J
  • Goblin_J
  • 2016年08月01日 15:44
  • 655
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV布局之三行三列左右两栏固定中间自适应
举报原因:
原因补充:

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