人生最好的旅行,就是你在一个陌生的地方,发现一种久违的感动。你在看孤独的风景,你在逃避我的真心!
最近听大家在讨论 负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>
以上这篇关于负margin的一些应用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
原文地址:http://blog.csdn.net/fanhaiwang520/article/details/8950189