从另一个div占用所有空间的div div

我有一个宽度为960px，margin为0的内容div（集中式），我想把一个div占据左边空白的所有空间，我该怎么做？从另一个div占用所有空间的div div

2012-04-30 evandrobm

张贴在的jsfiddle – srini

你的代码，你的意思是......左边空白处，直到窗口边缘？ –

是的，中心div的左边缘与窗口 – evandrobm

#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是另一种方式来做到这一点。

来源

2012-04-30 14:00:10

的左边缘之间的空间几乎完美，但中心div在透明背景下有png的背景图像，所以这样背景的container div会背后背景的中心div – evandrobm

@evandrobm我在答案中增加了一个额外的例子。看一看！ –

完美，完全按照我的需要工作，非常感谢man = D – evandrobm

使用显示：表，就像这样：

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; 
      }

来源

2012-04-30 14:16:58 daveyfaherty

做一些测试我的事情，你的解决方案将工作太多，谢谢，如果另一个解决方案不是交叉浏览器，我使用:) – evandrobm

我会在这种情况下使用display：table，因为内容会增长以适合页面。尝试在容器中添加很多段落以查看我的意思。 – daveyfaherty

从另一个div占用所有空间的div div

回答

相关问题