首页 > 开发 > CSS > 正文

关于负margin的一些应用

2024-07-11 08:32:41
字体:
来源:转载
供稿:网友

最近听大家在讨论 负margin的一些应用,所以自己研究一下,下面做一些记录。

1. 实现左右两列布局

方法一:

XML/HTML Code复制内容到剪贴板
  1. <div>        <div style="float:left;width:200px;">左侧</div>  
  2.      <div style="margin-left:200px;background:#999;">右侧</div>   </div>  

方法二:

XML/HTML Code复制内容到剪贴板
  1. <div>               <div style="width:200px;height:200px;">左侧</div>  
  2.             <div style="margin-left:200px;margin-top:-200px;">右侧</div>           </div>  

对比两种方法,第一种用到float,弊端就是应用float在IE中可能引起很多bug,第二种的话用-margin,本事还是比较赞的,暂时没发现没事问题;

2.导航栏

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>   <html lang="en">  
  2. <head>       <meta charset="UTF-8">  
  3.     <title>Document</title>       <style type="text/css">  
  4.         *{                margin: 0;   
  5.             border: 0;                padding: 0;   
  6.         }            ul{   
  7.             overflow: hidden;            }   
  8.         ul li{                background: #999;   
  9.             border-left: 1px solid #000;                width:60px;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表