html - CSS中的相对和绝对定位？

Question

这是到目前为止的代码：http: //jsfiddle.net/WJve3/3/

我如何制作Object1和Object2定位两者相对于“标题”？

我现在似乎遇到的问题Object1是相对于title和Object2相对于Object1

Answer 1

你拼错了“位置”；并且您需要对 Object1 和 Object 2 使用静态定位。试试这个：

.title {
    position: absolute;
    top: 0%;
    left: 45%
}
.Object1 {
    position: absolute;
    top 0;
    left: 0;
}
.Object2 {
    position: absolute;
    top 0%;
    left: 0;
}

Answer 2

你少了一个</div>

<DIV class="title">
    <h1><font face="Comic Sans MS" color=black><center>Title</center></font></h1>
    <DIV style="position: relative;"> 
        <DIV class="Object1">
            <h2><font face="Comic Sans MS" color=black><center>Object1</center></font></h2>
        </DIV>
        <DIV class="Object2">
            <h2><font face="Comic Sans MS" color=black><center>Object2</center></font></h2>
        </DIV> <!-- MISSING /DIV -->
    </DIV>
</DIV>

并且拼错了“位置”

Answer 3

您可以使用此 CSS 将对象放在 1 行

.title {
   margin: 0 auto;
   width: 300px;
}
.Object1 {
   float: left;
   width: 50%;
}
.Object2 {
   width: 50%;
   float: right;
}

Answer 4

如果您需要彼此相邻的对象，则不需要位置：

    .title {
      position: absolute;
      top: 0%;
      left: 45%
    }
   .Object1 {
      float:left
    }
    .Object2 {
      float:left;
      margin-left:20px;
    }

或者您可以给标题 div 一个相对位置，并给 object1 和 2 绝对定位。这样您就可以将对象放置在标题 div 中。