Question

<div id="outer" style="position:relative; width:100%; height:100%">

  <div id="1" style="position:relative; width:25%; height:auto;"></div>

  <div id="2" style="position:relative; width:65%; height:auto;">

     <div id="2a" style="position:relative; width:15%; height:auto;"></div>

  </div>

</div>

问题是＃2和＃2a没有与＃1对齐，我必须使用top：-xxpx对齐到顶部。

http://jsfiddle.net/D7HZR/

Answer 1

Fiddle。这是你在找什么？

#1, #2{
float:left;
}

Answer 2

坦率地说，我不确定你想要什么。我想你想要那个：

<div id="outer" style="position:relative; width:100%; height:400px; border:#000000 solid 1px;">

  <div id="1" style="float:left; width:25%; height:400px; background:#fff000;"></div>

  <div id="2" style="float:left; width:65%; height:400px;background:#ff0000;">2

     <div id="2a" style="float:left; width:15%; height:auto;background:#000fff;">2a</div>
      <div style="clear:both"></div>

  </div>

</div>

http://jsfiddle.net/D7HZR/2/

Answer 3

好的，我认为我已经理解了你的问题，只需在id为1和2的div上添加display属性

<div id="outer" style="width:100%; height:400px; border:#000000 solid 1px;">

  <div id="1" style="display: inline-block; width:25%; height:400px; background:#fff000;"></div>

  <div id="2" style="display: inline-block;  width:65%; height:400px;background:#ff0000;">

     <div id="2a" style="width:15%; background:#000fff;"></div>

  </div>

</div>

http://jsfiddle.net/p5KQJ/

Answer 4

#outer div {
    float: left;
}

如果你想让它占据垂直空间，你还需要在内部div上设置一个高度。

目前还不清楚你是否想要嵌套第三个div，所以我制作了一个小插图，其中一个版本嵌套，一个版本并排放置。

FIDDLE here

嵌套<div>未与顶部</div>对齐

4 个答案: