最近听大家在讨论 负margin的一些应用，所以自己研究一下，下面做一些记录。
1. 实现左右两列布局
方法一：
XML/HTML Code复制内容到剪贴板
<div><divstyle="float:left;width:200px;">左侧</div><divstyle="margin-left:200px;background:#999;">右侧</div></div>方法二：
XML/HTML Code复制内容到剪贴板
<div><divstyle="width:200px;height:200px;">左侧</div><divstyle="margin-left:200px;margin-top:-200px;">右侧</div></div>对比两种方法，第一种用到float，弊端就是应用float在IE中可能引起很多bug，第二种的话用-margin，本事还是比较赞的，暂时没发现没事问题；
2.导航栏
XML/HTML Code复制内容到剪贴板
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">*{margin:0;border:0;padding:0;}ul{overflow:hidden;}ulli{background:#999;border-left:1pxsolid#000;width:60px;height:30px;float:left;list-style:none;text-align:center;margin-left:-1px;}</style></head><body><divstyle="margin-left:20px;"><ul><li>1</li><li>2</li><li>3</li></ul></div></body></html>或者：
XML/HTML Code复制内容到剪贴板
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">*{margin:0;border:0;padding:0;}ul{}ulli{background:#999;border-left:1pxsolid#000;border-right:1pxsolid#000;width:60px;height:30px;float:left;list-style:none;text-align:center;margin-left:-1px;}</style></head><body><divstyle="margin-left:20px;"><ul><li>1</li><li>2</li><li>3</li></ul></div></body></html>合理使用overflow以及-margin 。
以上这篇关于负margin的一些应用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：http://blog.csdn.net/fanhaiwang520/article/details/8950189
最新文章
热门文章
猜你喜欢
