div+css 三列自适应等高且中列宽度自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列自适应等高且中列宽度自适应 - www.jzread.com</title>

<style type="text/css教程">
a{ color:#30C;}
.wrap{overflow:hidden;}
.left{width:250px;float:left; background:#FC9;}
.right{width:250px;float:right;background:#FC9;}
.center{ background:#FC0;_float:left;/* ie6 hack*/  overflow:hidden;}
.row{margin-bottom:-10000px;padding-bottom:10000px;}
</style>

</head>
<body>
<div class="wrap">
  <div class="left row"><a href="#">www.jzread.com</a></div>
  <div class="right row">
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
        </div>
          <div class="center row">
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
        <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
        <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
        <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
                <a href="http://www.jzread.com/">www.jzread.com</a><br />
        <span style="float:right; position:relative;"> </span> <!--for ie6-->
        </div>
</div>
</body>
</html>

时间: 2024-09-20 14:47:07

div+css 三列自适应等高且中列宽度自适应的相关文章

2天驾驭DIV+CSS!第五课(上)

一般网站都会做到点击logo,就会回到主页,应该怎么做呢,大家首先会想到,给图片加上链接就可以了 前四节的大练习大家做的怎么样?有没有难度,如果你觉着有难度没有关系,这节课,我带着大家做一下这个练习![第一步 整体布局与公共CSS定义]我们先来分析一下这个页面页面主要分5大块,顶部的Logo.导航条Nav.Banner.Content.Footer,如下图这样HTML就很容易写出来了 <div id="Logo"></div><div id="N

DIV CSS隐藏内容样式方法大全

 DIV CSS网页布局有很多值得学习的地方,这里和大家重点讨论一下DIV CSS隐藏内容样式方法,相信本文介绍一定会让你有所收获.   DIV CSS隐藏内容样式方法   CSS隐藏的用途   1.对文本的隐藏   2.隐藏超链接(另类黑链)   3.对统计代码隐藏   4.隐藏超出图片   5.CSS隐藏滚动条   6.CSS来隐藏DIV层   使用CSS隐藏方法   1.使用display:none;来隐藏所有信息(无空白位占据)推荐,CSSdisplay手册查看   2.使用overfl

如何将Excel中列或行展开和缩放

  Excel中列或行展开和缩放方法: 对Excel中列和行的展开和缩放方法一样 方法一: 1.选中需要缩放的行或列,点击[数据]----[创建组] 2.点击[]能缩放excel表中的列或行 3.点击[]能展开excel表中的列或行 4.Excel中列或行展开和缩放结果图 方法二: 选中需要缩放的行或列,使用快捷键方式shift+alt+向右键.

div+css横向三栏布局自适应宽度示例

div+css横向三栏布局自适应宽度示例以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

一行三列DIV+CSS布局

css 一行三列DIV+CSS布局;这是昨天晚上做的一个例子: CSS部分: 程序代码<style>/* 子 鼠 www.zishu.cn */body{margin:0px;padding:0px;font-size:12px; line-height:1.8;font-family: Verdana,宋体;} #footer{background:#FF66CC;}#header{ background:#FF3300;}#footer,#header,#wrap{clear:both;}

三列宽度自适应结构中的的DIV写法

 适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应. CSS #main{ width:760px; margin:0 auto; } .left{ width:100px; float:left; } .right{ width:120px; float:right; } .center{ margin:0 120px 0 100px; width:auto; } .clear{clear: both;} HTML <!--注意:center这个DIV的位置--> <div id

css 两列宽度自适应三种测试例子

两列宽度自适应测试 左侧浮动,右侧margin-left,IE6,7下在缩小到一定程度右侧会下沉,而且有一个 IE6 3px bug Right 测试子元素能否使用width:100% 左侧绝对定位,右侧margin-left,此方法有效的避免了右侧下沉和IE6 3px bug Right 测试子元素能否使用width:100% 计算边框宽度,在非FF的浏览器中宽度过小时会出现右侧下沉,而且同样会有IE6 3px bug"> 另外还有网上的一种方法,可能不用确定左侧宽度,利用那啥hasLa

css实现二列宽度自适应实例

从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值:  代码如下 复制代码 #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 20%; } #right { bac

Div + CSS高度自适应解决方案

自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了.按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为- 下面介绍采用"隐藏容器溢出"和"正内补丁"和"负外补丁"结合的方法 主要代码: #wrap{overflow:hidden;} /