珠江路在线
首页
互联网思维
硬件中心
软件中心
游戏中心
源码之家
今日新鲜事
传奇
软件开发培训班
>>
编程开发
>> CSS
软件新闻
编程开发
创意设计
操作系统
软件下载
固定右栏宽度, 左栏内容先出现同时自适应宽度的布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定右栏宽度, 左栏内容先出现同时自适应宽度的布局 - Beautiful Style « 样式之美 » loaoao.com </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="KEYWords" content="fixed,css,xhtml,effect" /> <meta name="DEscription" content="固定右栏宽度, 左栏内容先出现同时自适应宽度 " /> <meta name="author" content="aoao" /> <meta content="all" name="robots" /> <link rel="start" href="http://www.loaoao.com" title="Home" /> <style type="text/css"> body{ font-family:Verdana, Arial, Helvetica, sans-serif; min-width:620px; margin:0; padding:0; } #wrapper{ float:left; display:inline; margin:0 30px; background-color:#ccc; } #header,#footer{ clear:both; padding:10px; text-align:center; } #left{ float:left; width:100%; margin:0 0 0 -200px; } #innerLeft{ margin:0 0 0 200px; background-color:#efefef; } #right{ float:left; width:200px; background-color:#ddd; } .inner { padding:2px 12px; } p{ line-height:1.6em} </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>固定右栏宽度, 左栏内容先出现同时自适应宽度的布局</h1> </div> <div id="left"> <div id="innerLeft" class="inner"> <h2>工作原理</h2> <p>#wrapper必须触发hasLayout,不然有时里面的内容会浮得怪怪的，我直接用float的，可以用其他方式 。其实如果只是要做到这个例子要的效果连#wrapper都可以不要 。 #left定义100%宽度并利用margin:0 0 0 -200px把左边整块放在偏移入左边200px处，再利用#innerLeft的margin:0 0 0 200px再把内容撑出来， #right只是简单的浮动，#innerRight米多大作用，只是习惯性保留着，除了可以让我们的控制更简单点，还可以为下次改变布局可保持结构不变 。</P> <p>除了可以固定右边也可以固定左边，有空的朋友可以尝试一下</P> <h2>存在问题</h2> <ul> <li>IE7以下版本的IE浏览器无min-width，拉太小会很难看 。下篇文章再解决</li> </ul> <h2>扩展功能</h2> <ul> <li>如果想左右两列等高可以参考这个：解决列高度自适应(列高度相同)的五种方法 </li> <li> 也可以玩：固定中栏宽度, 左右两栏宽度相等和自适应 </li> <li>还可以扩展这样的功能：最小高度100%，页脚保持在底部的布局方法</li> </ul> </div> </div> <div id="right"> <div id="innerRight" class="inner"> <p>这只是个简单的例子，希望对初学CSS布局的朋友有帮助 。</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/game/news/2018/11m78821.html" target=_blank > 游戏摄影师靠“截图”年入600万，这是什么职业？ </a></td><td><a href="http://www.zhujiangroad.com/edu/soft/69739.html" target=_blank > 了解常被用户忽略的Windows8系统技巧 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/software/news/2021/6m83467.html" target=_blank > 微软正式推出Windows 11系统：确认老用户都能免费升级 </a></td><td><a href="http://www.zhujiangroad.com/mobile/news/2013/4a16252.html" target=_blank > 手机能成救命草 小编教您五招自救方法 </a></td></tr></table></div> <p>基本还有很多功能可以写进来，怕写得太乱了，还是等下一篇，好骗点流量 。</P> </div> </div> <div id="footer"> <p>Copyright © 2006 aoao , Some Rights Reserved .</P> </div> </div> </body> </html>
技术文章快速查找
新的HTML标签<search>详解
html链接与文本标签们
HTML基本语法和语义写法规则与实例
div+css如何实现页脚的置底
用DIV+CSS写小三角
提高网页效率的14条注意事项图文
css强制换行 css强制不换行的css方法
以前写的两个CSS树形菜单
相关下载
在线教程导航
软件应用
·
Windows8
·
Windows7
·
Word
·
Excel
·
PPT
·
WPS
Web开发
·
ASP
·
JavaScript
·
DIV+CSS
·
JSP
·
VbScript
·
XML
·
PHP
开发语言
·
VB
·
VC
·
ASP.NET
·
Java
·
C++
·
Delphi
数据库开发
·
MySQL
·
MsSQL
·
Access
·
Oracle
·
DB2
手机系统
·
Android
·
iOS
·
WindowsPhone
网站设计
·
Flash
·
Dreamweaver
·
Fireworks
平面设计
·
Photoshop
·
CorelDraw
·
AutoCAD
·
3DsMAX
·
Illustrator
网络技术
·
网站运营
·
网络安全
·
网络搭建
工具：
成语大全
邮编区号
全国地图
南京二手车
免费电影
汉字换拼音
繁体字转换
二维码
| 站长工具：
收录/反向链接
ALEXA排名
关键词排名
WHOIS
教程：
PPT
Excel
Word
Dreamweaver
Photoshop
|
ASP
PHP
|
ASP.NET
Java
|
SQL
MySQL
热门论坛：
游戏
美食
传奇
冒险岛
魔域
天龙八部
DNF
征途
游戏：
传奇
天龙八部
魔域
奇迹
DNF公益服
传奇世界
神途
梦幻西游
天龙八部
魔域
DNF
冒险岛
奇迹
魔域
传奇
单职业
天龙
魔域
梦幻西游
DNF
天龙八部
关于我们
广告报价
|
版权声明
：本网站归南京网爵数码科技有限责任公司版权所有。
苏ICP备05016148号-1
公安备案号 32010202010177
