コンテナdivの上に一列に並ぶように内側のdivが必要

Question

外側のコンテナdivには2つの内側divがあります。右側の内側divには、ユーザー入力に基づいて拡大または縮小できるテキストがあります。テキストdivの高さ：250pxを設定してシミュレートしました）。変わったことは、右側の内側のdivの高さが増えるにつれて、左側の内側のdivが外側のdivで下に落ちるということです。私はdivの周りに色のついた輪郭線を付けました - 左の内側div、 'falling'問題の輪郭は青い輪郭を持っています。 「ユーザーが入力したテキストのために成長する」というのは、紫色の境界線を持つ右の内側のdivです。

2つの内側divの外側コンテナにはオレンジ色の輪郭があります。

100％UNAFFECTEDにするか、入力されたテキストの量に影響を受けないようにするには、青い枠線で左のdivが必要です。青い枠線の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>