Question

我有这样的结构

<div id="first">
  <div id="second">
    <div id="third">
      <div id="fourth">
        text
      </div>
      <div id="fourth">
        text2
      </div>
    </div>
    Some other stuff...
  </div>
</div

这是目前的css：

#first {
 width:960;
}

#second {
 position:relative;
}

#third {
 position:relative;
 top:0;
 right:0;
}

#forth {
 position:relative;
 top:0;
 left:0;
}

现在我希望从第四项开始，从第三项开始，保持在第二项div的右侧。第二个div也有第一个宽度960。这有什么问题？为什么它不起作用？

Answer 1

首先，960不是宽度。没有单位说明符，它只是一个数字。 960px是宽度。

其次，那些其他div 正确定位，但它们的宽度是100％（默认值），因此它们看起来就像堆叠一样。由于这个原因，定位并不明显。

编辑：您还在CSS选择器中拼错了“#fourth”。

Answer 2

对于第四个div，为什么不使用inline-div？ [不确定它适用于IE7及以下] ..我认为第三个可以浮动到右边。你也不应该使用类而不是具有相同id的多个元素吗？

#third { 漂浮：对; 位置：相对; 顶部：0; 右：0; }

#forth { 显示：内联块位置：相对; 顶部：0; 左：0; }

Answer 3

编辑并应该工作（未经测试）：

<div id="first">
  <div id="second">
    <div id="third">
      <div class="fourth"> <!-- changed to class -->
        text
      </div>
      <div class="fourth"> <!-- changed to class -->
        text2
      </div>
    </div>
    Some other stuff...
  </div>
</div> <!-- was missing closing bracket -->

风格：

#first {
 width:960px; /* was missing px */
}

#second {
 position:relative;
}

#third {
 float:right  /* Makes the element float on the right side. Might want to clear in a later id/class to avoid quirks */
 position:relative;
 /* Removed redundant top:0; and right:0; */
}

.fourth {  /* Changed to class and fixed spelling */
 position:relative;
 /* Removed redundant top:0; and right:0; */
}

ID应该用于仅使用一次的元素。类应该用于可以/将要多次使用的元素。

CSS div内容大小问题

3 个答案: