DIV旁邊的DIV保持DIV在尺寸變化

Question

所以我有一個div通過AJAX填充，當它改變大小時，div旁邊的div向下移動，div下邊緣向下移動。我如何得到它，以便右側的div保持原位？

<div class="body"> 
     <div class="slection"> 
      <div class="selector"> 
       <select name="users" onchange="showUser(this.value)"> 
       <option value="Select day...">Select day...</option> 
       <?php 
       $pathToMe = dirname(__FILE__); 
       $path = $pathToMe . "/days/"; 
       $handle=opendir($path); 
        while ($file=readdir($handle)) 
        { 
         if (($file == ".") || ($file == "..")){ 
        } 
         else echo "\t<option value='".$file."'>".$file."</option>\n"; 
        } 
       ?> 
       </select> 
      </div> 
      <div id="content"></div> 
      </div> 
      <div class="sms"> 
      <div style="text-align:center"> 
       Send SMS to client 
      </div> 
     <div style="text-align:center"> 
       <div id="contact_form"> 
        <form name="contact" action=""> 
         <fieldset> 
         <input type="text" name="number" id="number" size="14" value="Number" class="text-input" /> 
         <br /><br /> 
         <textarea type="text" name="message" id="message" value="Message" class="text-input"></textarea> 


         <br /> 
         <input type="submit" name="submit" class="button" id="submit_btn" value="Send" /> 
         </fieldset> 
        </form> 
</div> 
</div> 
     </div> 
     </div> 

而CSS：

.header { 
    height:30px; 
} 

.body { 
    min-width:400px; 
    max-width:700px; 
    min-height:200px; 
    margin-left:auto; 
    margin-right:auto; 
    width:500px 
} 

.sms { 
    float:right; 
    margin-top:-20px; 
} 

.selection { 
    float:left; 

} 

活生生的例子here。

Answer 1

添加

pre{ 
width:200px; 
float:left; 
} 

你的CSS。

當前pre取整個區域的寬度。將其定義爲200px寬仍然不會使其他元素達到與其相同的級別，因爲它不是display:inline;，所以您也需要float。