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

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

在用DIV布局时,总会碰到各种各样的问题,有些还非常怪异,总之让人头大。不过当你找到了窍门,你就会把它当作是一门艺术来看待了,真的非常有趣。

现在先来谈谈关于三行两列的布局[左栏固定,右栏自适应宽度]之一,我能想到比较好的办法是使用margin漂浮法。

先说说要做成这件事,要做些什么,会碰到些什么问题。要让右栏自适应宽度,也就是说随着浏览器分辨率的不同而发生相应变化。同时左栏又如何做到固定在某个位置,而且宽度固定呢?很简单,只需要右栏从自身宽度里让出一些给左栏就行了,也就是预留出leftMargin,而右栏仍保持原来的性能自适应。现在就是如何让左栏固定在左边的问题了。大家都知道,让某块居左或居右可以通过float来解决,只需要选择其值为left或right,让该块浮动在某个位置就OK。

演示地址:http://www.doyoe.com/model/xhtmlcss/layout/1.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自然就成了两栏之间的间距了。

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

以上就是使用margin漂浮法作出的[左栏固定,右栏自适应宽度]布局,为了区分开左右的位置,我预留了两栏之间的间隔为10px,当然这在真正做web的时候为了美观也是要的。在效果演示页面能看到,或者直接把以上代码拷到本地也行。整个布局十分简单,思路也比较清晰,希望有更好意见的朋友多多交流。

*题外话:其实这个布局不需要用到margin漂浮,一样能很简单的实现。步骤:左栏依然如此,右栏不需要任何设定,效果依然为“左栏固定,右栏自适应宽度”。只是考虑到后面更复杂的东西,这样的表现会不大完美。就如,要清晰分开两栏就不易。

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

横向两列布局(左列固定,右列自适应)的4中实现方式

横向两列布局 BFC
  • Lovejulyer
  • Lovejulyer
  • 2016年04月13日 02:02
  • 1082

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

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

css两列布局,一列固定宽度,另一列自适应宽度

两列之一固定,另一列自适应 1-2-1单列变宽布局 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; ...
  • wuzhe128520
  • wuzhe128520
  • 2016年05月02日 15:48
  • 1751

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

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

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

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

CSS 两列布局---左侧固定,右侧自适应

前端一个小面试题总结如下: 1、方法一,高度100%,左侧float,右侧自动宽度(会自动占满剩余宽度)。 2、方法二,绝对定位absolute,使用方法一的HTML结构,左侧绝对定位,拉出文档流...
  • osdfhv
  • osdfhv
  • 2016年08月11日 09:30
  • 2703

左侧固定宽度,右侧自适应宽度铺满剩余屏幕

1、第一种办法 Document *{ margin: 0; padding: 0; } .left{ width: 200px; float: left; b...
  • zx_p24
  • zx_p24
  • 2016年11月23日 13:53
  • 1143

css实现右侧固定宽度,左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。 这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应...
  • yongzhen150
  • yongzhen150
  • 2015年12月01日 09:21
  • 1459

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

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

div左边固定、右边自适应 和 上边固定、下边自适应

在网页设计中,我经常遇到div一边固定、一边自适应的需求,在学习了关于CSS的一些书籍和网上的一些案例后,总结了两个例子,以便应对以后的不时之需。话不多说,直接看代码。 第一个,是div左边变化,右...
  • a1319361
  • a1319361
  • 2016年01月07日 11:01
  • 560
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV布局之三行两列左栏宽度固定右栏宽度自适应
举报原因:
原因补充:

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