1

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

我遇到的具体问题如下：

我有一个标题 div 元素（红色），下面有 2 列（白色和绿色）。通常使用 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;
}

DIV 位置以图形方式解释

4

4 回答 4

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

它有效吗？

于 2012-07-27T21:51:40.310 回答
1

你可以只使用负边距

http://jsfiddle.net/gAKAK/

于 2012-07-27T21:54:02.583 回答
1

这是JSFiddle，它使用 position absolute演示了没有浮动的布局。根据我的经验，绝对位置更加灵活，并且适用于这种布局，尤其是当您想使用顶部、右侧、底部和左侧停靠元素时。在某些情况下，您需要回退使用浮点数，但在这种情况下不需要。

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

的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并看到容器也很灵活。

于 2012-07-27T22:00:41.943 回答
0

这是一个复杂的请求，所以不要因为无法弄清楚而感到难过。您不必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; }
于 2012-07-27T22:03:15.040 回答