当前位置：首页 → 问答吧 → 左浮动加margin-right 负值是什么情况？

左浮动加margin-right 负值是什么情况？

时间：2011-04-16

来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> * {margin:0; padding:0;} #content {margin-right:-240px; background-color:#f00; width:100%; float:left;} #sidebar {width:240px; background-color:#f90; float:right;} </style> </head> <body> <div id="content">左边</div> <div id="sidebar">右边</div> </body> </html>
提示：您可以先修改部分代码再运行

之前看到一个高手写的，现在知道能这么写，但是想知道原理。

[ 本帖最后由 leilay 于 2011-4-16 14:59 编辑 ]

作者: leilay 发布时间: 2011-04-16

你可以这么理解：240像素的负外边距就是让他的实际尺寸在对应的方向上缩短240像素，而且那一部分还不属于这个容器的范围。

作者: wwdsnn 发布时间: 2011-04-16

说点别的，
比如我现在要做一个页面

页面宽度960px；

头部header，高度160px；

底部footer，高度120px；永远在底部

中间content内容最小高度 = 浏览器高度 - 头部- 底部
且内容左边或者右边有一个导航菜单栏sidebar,sidebar高度=content高度
也就是说菜单高度要撑开的.

这个咋实现呢

作者: leilay 发布时间: 2011-04-16

你给出的例子是单列固定宽度，单列液态布局的实现。
负边距的实现在论坛讨论过，可以搜索下，我记得鹤之舞（好像是这个名字，不太清楚了）说的最详细了。

作者: xmlovedoudou 发布时间: 2011-04-16

是的我有看过,但是我从来没用蓝色搜索成功搜索到我想要的东西.