最近听大家在讨论 负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