css高度，宽度 自适应布局

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>test</title> 
    <style> 
    *{ 
        margin:0; 
        padding:0; 
        color:#FFF; 
    } 
    .a{ 
        background:#FF0000; 
        width:100%; 
        float:left; 
        margin-right:-100px; 
    } 
    .b{ 
        background:#006699; 
        width:100px; 
        float:right; 
    } 
    .c{ 
        background:#006666; 
        margin-right:100px; 
    } 
    </style> 
    </head> 
    <body> 
    <div class="a"><div class="c">左</div></div><div class="b">右</div> 
    </body> 
    </html> 
上面代码是右侧固定宽度，左侧自适应宽度，margin-right:-100px 也说明了浮动元素的尺寸是受margin影响的，上面a的宽度 就是100%宽度再减去 100px
这里自适应是利用的浮动元素的尺寸可以通过margin来调整，如果给予margin-right负值，那么右侧将会裁去相应的宽度，这样就给右侧的固定宽度布局留出了相同大小的空间
这样视觉上是右侧固定浮动，左侧自适应的浮动，但是事实上如果没有c元素，而是直接把文字放到a中，文字是会跑到b的下面去的，所以我给a里面加上了c，并且不指定宽度，水平右侧外边距给100px，这样文字就不会再被覆盖，大家可以测试一下

时间： 2024-10-28 10:54:25

css高度，宽度 自适应布局的相关文章

css多栏自适应布局

css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往可以完全控制.float适合模板布局,模板中填充的内容无法控制. 一.左侧尺寸固定右侧自适应 1.浮动实现 在css浮动一文已介绍过. .left{ width: 150px; float: left; } /*流体布局*/ .right { margin-left: 150px;} 原理:左侧定宽

一列宽度自适应布局

问题描述 本帖最后由 巴味人 于 2015-3-5 11:53 编辑 一列宽度自适应布局 #layout{ background-color:#cccccc; border:2px solid #333333; width:80%; height:300px; } 一列宽度自适应布局 解决方案 很不错的啊static/image/common/sigline.gif90%打工小伙一生都不可能知道的秘密http://user.qzone.qq.com/82175487

iframe高度宽度自适应（转）

http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应 完全跨域的iframe高度自适应   同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档对象,进而可以取得页面的高度,通过此高度值赋值给iframe tag. 2. 子页面可以通过parent访问到父页面里引入的iframe tag,进而设置其高度.   但跨域的情况则不允许对子页面或父页面的文档进行访问(返

css+div三栏布局 左右固定宽 中间自适应

三栏布局,这是一种相对比较常见的页面布局,这里提供2种实现方法: 方法1: 使用最新的css3伸缩盒布局属性,可轻松实现(三栏等高,默认就是三栏等高哟!)  代码如下 复制代码 <style>     .header,.footer{height: 100px;line-height: 40px;font-weight: bold;background-color:     #bbb;text-align: center;} .main{} .content{overflow: hidden;

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

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

css 左列自适应宽度的一行两列布局

今天想实现一行两列的布局,左列宽度自适应,右列宽度保持不变.HTML的写法是: <div id="main">     <div id="left"><p>左列</p></div>     <div id="right"><p>右列</p></div> </div> 现在加CSS,要实现的效果是mian是可变的,right层宽度

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-

CSS网页布局入门教程6：左列固定，右列宽度自适应_基础教程

左列--固定(AA25.CN) 右列--宽度自适应(AA25.CN)

CSS网页布局入门教程5：二列宽度自适应_基础教程

左列--(AA25.CN) 右列--二列宽度自适应(AA25.CN)