关于css中的负边距(negative margin)的一些技巧,它是ccs布局中的常用的一个技巧,本文只是记录一下使用margin-left:-100%,也就是css的负边距原理,来实现两列自适应布局的一个demo,不理解的大家可以去网上搜索一下css负边距的一些布局使用和技巧、详解。。不多说,直接上代码。。
html:
<div class="main"> <div class="m-right"> <div class="box"></div> </div> <div class="m-left"></div> </div>css:
.main{ padding:10px; height:auto; overflow:hidden} .m-right{ float:left; width:100%; height:200px; } .box{ margin-left:160px; height:200px; background:#063;} .m-left{width:150px; height:200px; background:#990; margin-left:-100%; float:left;}
效果:
其他的方法: