negative margin layout

how to use negative margin to layout

by weiming le

HTML

<!DOCTYPE HTML>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>negative margin</title>
  </head>
  
  <body>
    
<h1>我们做个213的布局，尽管当前的结构是123</h1>

    <div id="box">
      <div class="box1">
         <h1>盒子一</h1>

      </div>
      <div class="box2">
         <h1>盒子二</h1>

      </div>
      <div class="box3">
         <h1>盒子三</h1>

      </div>
    </div>
  </body>

</html>

CSS

* {
  margin:0;
  padding:0;
}
#box {
  width:960px;
  margin:0 auto;
  background:#333;
  color:#fff;
  font-size:16px;
  border:1px solid red;
  overflow:hidden;
}
#box>div {
  float:left;
  height:300px;
}
#box .box1 {
  width:300px;
  background:#999;
  margin-left:240px;
}
#box .box2 {
  width:240px;
  background:orange;
  margin-left:-540px;
}
#box .box3 {
  width:420px;
  background:#993;
}