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

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

和前一篇文章一样,只是这次调换了个位置。把之前的左栏固定变为了现在的右栏固定,实现的手法也是大同小异,不过有一个地方需要注意。

那就是在写HTML时,应该把右边的先写,然后再写左边。因为DIV的默认样式是block,每个div都会自动断行。如果先写左边,再写右边的话,因为左边没有float漂浮,右边的会在右部断行;所以编写时,先写右边,再写左边,右边是float的。

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

CSS部分:

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

和前一篇文章一样没有什么大的不同,只是#dyleft和#dyright互换了一下,#dyright里面的float值为right,漂浮在右边。

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">头部</div>
<div id="dyright">右栏固定<br />宽度为200px</div>
<div id="dyleft">左栏宽度自适应</div>
<div id="dyfoot">底部</div>
</body>
</html>

这个布局基本和左栏宽度固定右栏宽度自适应一样,只是从上面可以看出,#dyright写在了#dyleft前面,这里只要注意这一点就可以了^_^祝大家好运。

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

DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.

DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;Firefox IE测试通过. 辛苦几天的结果啊 平行共三行,中间行分两列,左边固定宽度,右边自适...
  • kyleing
  • kyleing
  • 2013年04月22日 14:36
  • 854

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

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

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

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

两列布局——左侧宽度固定,右侧宽度自适应的两种方法

今天做了一个练习,要求用两种方法来实现左侧宽度固定、右侧宽度自适应的两列布局。一开始我以为会很简单,毕竟只是练习,但是我写出了一种方法之后却没能顺利的写出第二种方法。对于网上的一些解决方法我还是不太满...
  • jiadluo
  • jiadluo
  • 2015年08月24日 15:35
  • 3684

实现左边宽度固定,右边宽度自适应的两列布局

最近面试被问到一个问题,感觉还挺经典,但由于脑子短路回答的不是很好。面试过后,在此简单总结一下这个问题的答案,如果下次遇到可以能回答的好一点。 问题就是:实现一个两列布局,要求左边宽度固定,右边宽...

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

转自:W3CPLUS 今天与几位朋友一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用...

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

在讲这种布局之前,我还想和大家一起回想一下三列布局中的另一种,就是左右两列固定、中间自适应宽度。这种布局方法,网上问问G爸和度娘一定会有一大堆,但我还是要重复说说,方便自己今后查阅,记性太差,没办法。...
  • zxphwz
  • zxphwz
  • 2015年09月03日 13:15
  • 589

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

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

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

一、绝对定位法:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 #left{ width: 180px;...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV布局之三行两列右栏宽度固定左栏宽度自适应
举报原因:
原因补充:

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