博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
1-3-1中间固定两边变化
阅读量:6180 次
发布时间:2019-06-21

本文共 1257 字,大约阅读时间需要 4 分钟。

本例要介绍的是,固定列被放中间,它的左右各有一列,并按比例适应中宽度。这是一种很少见的布局形式。

这里以固定的1-3-1布局为基础。现在需要在left和right两个div外面分别套一层div,把它们“包裹”起来。

效果图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#header,#content,#footer{
 background-color:#ccc;
 border:1px solid #0ca;
 height:30px;
 width:80%;
 margin:10px auto;
 }
#content{
 height:500px;
 position:relative;
 }
#h{
 float:left;
 width:100%;
 margin-left:-104px;
 }
#w{
 margin-left:104px;
 position:relative;
 }
#left{
 height:500px;
 background-color:#FF0;
 border:1px #90F solid;
 width:100px;
 float:left;
 }
#midden{
 margin-left:100px;
 height:500px;
 border:1px blue solid;
 background-color:#0F0;
 }
#right{
 position:absolute;
 right:0px;
 top:0px;
 width:100px;
 height:500px;
 border:1px green solid;
 background-color:#F93;
 }

</style>

</head>

<body>

<div id="header"></div>
<div id="content">
  <div id="h">
    <div id="w">
      <div id="left">
      </div>
      <div id="midden">
     拉萨见法拉世界反垃圾是独立房间按时的离开房间拉斯科技福利卡来得及飞拉萨的解放路的时间按法律框架的撒离开房间按时的离开老大撒放家里是卡的房间里打开撒娇法律上的积分上的积分了
      </div>
    </div>
  </div>
    <div id="right">
    </div>
</div>
<div id="footer"></div>
</body>
</html>

转载于:https://www.cnblogs.com/93wei/archive/2011/11/04/2236106.html

你可能感兴趣的文章
linux tar 增量备份命令
查看>>
sql_游标总结 转
查看>>
使用纯css做一个播放器
查看>>
C语言程序设计_zju——第5周编程练习_素数和_念整数
查看>>
前端 搜索样式 html
查看>>
[CF773D]Perishable Roads
查看>>
[POI2008]Mirror Trap
查看>>
P1218 [USACO1.5]特殊的质数肋骨 Superprime Rib (数论—素数 + DFS)
查看>>
2.03_01_Python网络爬虫urllib2库
查看>>
2010年架构师考试知识点整理
查看>>
robot framework测试https接口实例
查看>>
JAVA连接SqlServer2008R2和MySql数据库
查看>>
使用自定义注解+Spring切面 实现日志记录
查看>>
linux历史命令查找快捷方式
查看>>
编译安装zabbix3.2
查看>>
vue根据路由变换,切换导航栏样式
查看>>
GoLang基础数据类型--->字典(map)详解
查看>>
Hadoop基础-HDFS集群中大数据开发常用的命令总结
查看>>
Elastic Stack之Redis集群使用
查看>>
C#编程(十四)----------构造函数
查看>>