css - div占据了另一个div的所有边距空间

Question

我有一个宽度为 960 像素且边距为 0 自动（集中）的内容 div，我想将一个 div 占据左边距的所有空间，我该怎么做？

Answer 1

演示 jsBin

  #container{
    position:relative;
    width:300px;/*change this*/
    margin:0 auto;
    height:200px;
    background:#cf5;
    padding-left:50%;
    margin-left:-150px; /*half the width*/
  }
  #centered{
    width:300px;
    height:100%;
    position:absolute;
    right:0px;
    background:#eea;
  }

HTML：

  <div id="container">  
    <div id="centered">centered</div>  
  </div>

这里： http: //jsbin.com/oluwos/3/edit是另一种方法。

Answer 2

使用 display: table，像这样：

http://jsfiddle.net/yVFzh/

<div class="wrapper">
              <div class="left-column">&nbsp;</div>
              <div class="centre"></div>
              <div class="right-column">&nbsp;</div>
            </div>​


            html,
            body{
                width:100%;
            }
            .wrapper{
                display:table;
                width:100%;
            }
            .wrapper > div{
                display: table-cell;
                background: blue;
                height:400px;
            }
            .wrapper .centre{
                width: 960px;
                background: yellow;
            }​