一布局求解
时间：2010-10-22
来源：互联网
<div style="background-color:#9C3; width:80px; height:80px; float:left">固定宽高度</div> <div style="background-color:#39F; height:200px">自适应宽度</div>
提示：您可以先修改部分代码再运行
最终效果图：提示：您可以先修改部分代码再运行
Snap1.gif (1.7 KB)兼容 ie/ff/chrome
[ 本帖最后由 lerio 于 2010-10-23 07:19 编辑 ]
作者: lerio 发布时间: 2010-10-22
<div style="background-color:#E4E4E4; padding-left:90px"> <div style="background-color:#9C3; width:80px; height:80px; position:relative; left:-90px">固定宽高度</div> <div style="background-color:#39F; margin-top:-80px">自适应宽度</div> </div>
提示：您可以先修改部分代码再运行
这个方法如何？！但在 chrome 下，父 div 撑不开(灰背景）。提示：您可以先修改部分代码再运行
[ 本帖最后由 lerio 于 2010-10-23 07:43 编辑 ]
作者: lerio 发布时间: 2010-10-23
<style type="text/css"> div { margin:0; padding:0; border: 1px dashed #630 } #Main {width:auto;background-color: #eee } #Sidebar {width:200px;background-color: #eee; float:left; } </style> </head> <body> <div id="Sidebar">固定宽度</div> <div id="Main">自适应宽度</div>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: lerio 发布时间: 2010-10-23
<style type="text/css"> div { margin:0; padding:0; border: 1px dashed #630 } #Main { margin-left:220px; background-color: #eee; height:300px; } #Sidebar {width:200px; height:200px; background-color: #eee; float:left; } </style> </head> <body> <div id="Sidebar">固定宽度</div> <div id="Main">自适应宽度</div>
提示：您可以先修改部分代码再运行
经测试IE678、FF、chrome都OK！！ main你可以设置min-height 提示：您可以先修改部分代码再运行
作者: jhtiboy 发布时间: 2010-10-23
<div style="background-color:#9C3; width:80px; height:80px; float:left">固定宽高度</div> <div style="background-color:#39F; height:200px;overflow:hidden;">自适应宽度</div>
提示：您可以先修改部分代码再运行
http://www.cssass.com/blog/index.php/2008/31.html 提示：您可以先修改部分代码再运行
作者: ONEBOYS 发布时间: 2010-10-23
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
