CSS布局-宽度自适应
发布时间:2020-12-14 23:51:13 所属栏目:资源 来源:网络整理
导读:在布局中,我们经常会用到div的宽度自适应。 一、两列 两列都是自适应 我们可以使用宽度百分比来实现。 *{padding:0;margin:0;}.left,.right{width:50%;height:100px;float:left;}.left{background-color:red;}.right{background-color:olive;}body div clas
在布局中,我们经常会用到div的宽度自适应。 一、两列两列都是自适应我们可以使用宽度百分比来实现。 *{padding:0;margin:0;} .left,.right{width:50%;height:100px;float:left;} .left{background-color:red;} .right{background-color:olive;} <body> <div class="left"></div> <div class="right"></div> </body> 这样,很容易就实现了双列各占一半的布局,若要对两列所占宽度进行调整的话,那么只需要修改各列的宽度百分比就行了。 一列自适应假设第一列宽度是固定的100px,而第二列需要自适应宽度。 方法一:利用浮动和外边距*{padding:0;margin:0;} .left{width:100px;height:100px;float:left;} .right{margin-left:100px;height:100px;} .left{background-color:red;} .right{background-color:olive;} <body> <div class="left"></div> <div class="right"></div> </body> 这样,左侧100px,右侧自适应的布局就出现了,当然这种方式在IE6下存在一个bug,会使得左右两个div之间有个3px的空隙。 方法二:利用绝对定位*{padding:0;margin:0;} .box{position:relative;} .left{width:100px;height:100px;float:left;} .right{position: absolute;height:100px;left:100px;right:0px;} .left{background-color:red;} .right{background-color:olive;} <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> 效果图同上,利用绝对定位,对自适应的元素稍作定位,便能实现自适应,IE7+都可以兼容。 二、三列及以上方法一:利用宽度百分比该方法可以很容易地实现多列自适应布局,当然如果出现设置宽度这个问题时,该方法也是可以使用的,需要配合使用box-sizing这个属性,可以让原方法继续发挥他的作用。 方法二:利用浮动和外边距该方法只能实现单列自适应(margin),其他列固定宽度(浮动)这种布局方式。 注:多列时,当出现特殊的自适应布局时,可以考虑在该方法外嵌套一个方法一的方式。当然,其他情况下使用时,会照成自适应区块的增长(减小)比例不是固定的问题。 方法三:绝对定位同方法二,多列时使用仍有限制。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读