需要内部div在容器div中顶部对齐

Question

最外面的容器div有两个内部div - 右侧内部div具有可以根据用户输入增长或缩小的文本(稍后,通过设置其高度:250px,现在在文本div中模拟大量文本).奇怪的是 - 随着右侧内部div的高度增加 - 左侧内部div'在外部div中向下".我在div周围放置了彩色轮廓 - 左内部div,带有'fall'问题的轮廓有蓝色轮廓."由于用户输入的文本而增长"是右边的内部div,带有紫色边框.

2个内部div的外部容器具有橙色轮廓.

我需要带有蓝色边框的左侧div为100%不受影响或不受输入文本量的影响.带有蓝色边框的div 必须保留在具有橙色边框的外部容器div的左上角.

为什么右侧绿色div中的盒子高度会向左推动div？

这是一个链接,可以看到发生了什么:

http://jsfiddle.net/Shomer/JSyYY/

这是代码:

<div style="display:inline-block; border: 4px solid orange;">
    <div style="border: 2px solid blue; display:inline-block;">
      <div style="display:inline-block; border: 1px solid red;">topleft
      </div>
      <div style="display:inline-block; border: 1px solid red;">topright
      </div>
      <div>lower div
      </div>
    </div>

   <div style="display:inline-block; border: 3px solid purple;">
    <div style="display:inline-block; height:250px; border: 1px solid red;"> "text"
   </div>
   <div style="display:inline-block; margin-top:0; border: 1px solid red;"> <b>button</b>
   </div>
    <div>&nbsp; </div>
  </div>
/div>

Answer 1

Hiyou应该尝试将垂直对齐设置为blueborder div的父div的顶部.

<div style="display:inline-block; border: 4px solid orange;" >
    <div style="border: 2px solid blue; display:inline-block;**vertical-align:top**">
          <div style="display:inline-block; border: 1px solid red;">topleft
          </div>
          <div style="display:inline-block; border: 1px solid red;">topright
          </div>
          <div>lower div
          </div>
          <!-- <div>a</div> -->
    </div>

    <div style="display:inline-block; border: 3px solid purple;">
        <div style="display:inline-block; height:250px; border: 1px solid red;"> "text"
       </div>
       <div style="display:inline-block; margin-top:0; border: 1px solid red;"> <b>button</b>
       </div>
        <div>&nbsp; </div>
    </div>
</div>