CSS定位2个移位列

Question

首先是有一个关于定位元素的好教程，它真正解释了发生了什么？我读过多次，但无法抓住它。

我遇到的具体问题如下：

我有一个标题div-element（红色），下面有两列（白色和绿色）。通常使用float：left;我可以将元素放在彼此旁边。但是现在我想要一个（白色的）在显示的标题上移动一点。

具有负顶值的相对定位我可以在正确的位置获得白色但是如何定位第二列。调整浏览器大小时，它会搞砸。

#Column1
{
  float: left;
  position: relative;
  top: -140px;
  background-color: #FFFFFF;
  left: 70px;
  width: 280px;
  min-height: 500px;
  padding: 10px;
}

#Column2
{
  float: left;   
  width: 800px;
  background-color: #00FF00;
}

Answer 1

我要在这里吐痰：

HTML

<div id="red"></div>
<div id="white"></div>
<div id="green"></div>

CSS

#red {
    width: 100%;
    float: left;
    height: 100px;
    position: relative;
    background-color: #f00;
}
#white {
    width: 20%;
    float: left;
    margin-left: 4%;
    margin-top: -40px;
    position: relative;
    background-color: #fff;
    height: 400px;
}
#green {
    width: 76%;
    float: left;
    position: relative;
    background-color: #0f0;
    height: 400px;
}

有效吗？

Answer 2

你可以使用减去边距

http://jsfiddle.net/gAKAK/

Answer 3

以下是JSFiddle，使用位置绝对来演示没有花车的布局。 根据我的经验，绝对更灵活，适用于这种布局，特别是当您想要使用顶部，右侧，底部和左侧停靠元素时。 在某些情况下，您需要使用浮点数，但在这种情况下不需要浮点数。

使用浮动来漂浮它周围的东西并且绝对地定位以停靠东西。

HTML

<div id="Header">header</div>
<div id="Column1">Left</div>
<div id="Column2">Right</div>

CSS

#Header {
  background-color: red;
  height: 200px;
}
#Column1 {
  position: relative;
  background-color: #FFFFFF;
  top: -140px; left: 70px;
  width: 280px;
  min-height: 500px;
}
#Column2 {
  position: absolute;   
  background-color: #00FF00;
  left: 350px; top: 200px; right: 0;
  min-height: 360px;
}​

更新从JSFiddle中的 .more 类中删除display：none，并看到容器也是灵活的。

Answer 4

这是一个复杂的请求，所以不要觉得你无法弄明白。对于此解决方案，您不必设置除侧边栏以外的任何内容的width;我的解决方案依赖于overflow: hidden的罕见使用来实现这一点。

http://jsfiddle.net/Wexcode/uBQEu/

HTML：

<div id="header"></div>
<div id="white"></div>
<div id="green"></div>

CSS：

#header { 
    background: red;
    height: 70px;
    border: 1px solid #000; }
#white {
    background: #fff;
    float: left;
    margin: -30px 0 0 70px;
    width: 100px;
    height: 230px;
    border: 1px solid #000; }
#green { 
    background: green;
    overflow: hidden; 
    height: 201px;
    border: 1px solid #000;
    border-top: 0;
    border-left: 0; }