当DIV旁边的DIV改变大小时,将DIV保持在Spot中

时间:2011-06-05 17:58:47

标签: php ajax html

所以我有一个通过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

1 个答案:

答案 0 :(得分:1)

添加

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

到您的CSS。

目前pre占据整个区域的宽度。将其定义为200px宽仍然不会使其他元素达到与display:inline;不同的水平,因此这也是您需要float的原因。