日期:2014-05-17  浏览次数:20601 次

求教margin负值问题
源码:
<div id="container">
  <div id="content">Main content section</div>
  <div id="sidebar">Right Sidebar </div>
</div>

<style type="text/css">
#container{
  background-color:#0ff;
  overflow:hidden;
  margin:0 100px;
  padding-right:220px; /* 宽度大小等与边栏宽度大小*/
}
* html #container{
  height:1%; /* So IE plays nice */
}
#content{
  background-color:#0ff;
  width:100%;
  border-right:220px solid #f00;
  margin-right:-220px;
  float:left;
}
#sidebar{
  background-color:#f00;
  width:220px;
  float:left;
  margin-right:-220px;
}
</style>

红色的区域是我不理解的,为什么要使用负的margin呢?FF下调试,去掉这行,siderbar就重起一行了。
求高手解释下,或者给一些专业的文章地址,我想好好的研究下。
margin负值在页面布局经常使用,当一个元素margin-left和margin-right 一起使用的时候我就无法淡定了。。。

------解决方案--------------------
比如两个div 像这样'回' div1为大口 div2为小口 div2的margin-top为负可以在div2是div1的子元素的情况下 向上移出div1 像这样吕 也可以交在一起 看值的大小 个人理解
------解决方案--------------------
w3cshcool看看定位吧,尤其是盒子模型
你外部div使用了padding-right:220px;根据盒子模型,外部div宽带实际是又增加了220px,浏览器兼容问题!具体去了解一下盒子模型及浏览器兼容吧
------解决方案--------------------
margin负值的应用
------解决方案--------------------
#container{
padding-right:220px; /* 宽度大小等与边栏宽度大小*/
}

留出220px的

#content{
width:100%;
}
沾满container (这个沾满是留有220px的空位的,这个空位用边框填充了)
border-right:220px solid #f00; 边框220粗(太错了,嘿嘿)


#sidebar{
margin-right:-220px;
}

#content已经100%了,怎么能容下#sidebar呢,
#sidebar就往right挤了220px(margin-right:-220px).




推荐 林小志 css那些事儿
李超 css网站布局实录

我最近也在学布局 这两本书介绍的不错 尤其李超的本,

哥们你的例子不错 从哪里复制的 给个链接