需要內部div對齊頂部在容器div

Question

最外面的容器div有兩個內部div - 右側內部div有文本，可以根據用戶輸入增長或縮小（稍後，很多文本是現在在文本div中通過設置它的高度來模擬：250px）。奇怪的是 - 隨着右側內部div的高度增長 - 左側內部div在外部div下降。我在divs周圍放置了彩色輪廓 - 左邊的內部div與「下降」問題的內部div具有藍色輪廓。 '由於用戶輸入的文字而增長'是右邊的內部div，帶有紫色邊框。

2內部div的外部容器有一個橙色輪廓。

我需要藍色邊框左邊的div是100％UNAFFECTED或不受輸入文本數量的影響。這留下與藍色邊框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>