Div内容如何自动充满？

Question

        <div id="myNum" style="width: 100%">
<input id="myNum_Text" type="text" style="float: left; height: 22px; width: 100%" />
<div id="myNum_UpButtonContainer" style="height: 11px; width: 16px;">
</div>
<div id="myNum_DownButtonContainer" style="height: 11px; width: 16px;">
</div>
</div>
像这样，我希望文本框在div宽度改变时自动改变，但最右边要有div的位置。但这样设置后会把div挤到下行去。CSS怎么处理？

Answer 1

<div>
  <div style="float:left;">left</div>
  <div style="width:30px;">right</div>
</div>就是不论最外层的Div怎么改变宽度，left的Div总在左边，right的Div总在右边且left的Div总是充满剩下的空间。

Answer 2

没理解。你input width: 100%  肯定占据了myNum整行。myNum_UpButtonContainer和myNum_DownButtonContainer 当然是被挤下去的。

Answer 3

用 <div style="float:right;"></div>

Answer 4

1楼是一种方法,另外提供给楼主table定位方法:如下:
        <div id="myNum" style="width: 100%">
            <table cellpadding="0" cellspacing="0" style="width: 100%">
                <tr>
                    <td valign="top">
                        <input id="myNum_Text" type="text" style="float: left; height: 22px; width: 100%" />
                    </td>
                    <td valign="top" style="width: 16px;">
                        <div id="myNum_UpButtonContainer" style="height: 11px; width: 16px;">
                        </div>
                        <div id="myNum_DownButtonContainer" style="height: 11px; width: 16px;">
                        </div>
                    </td>
                </tr>
            </table>
        </div>

Answer 5

就是不想用table布局，感觉那样标签太多了。

Answer 6

div布局在浏览器上面兼容性有点区别 所以用Table+DIV布局更好 呵呵

Answer 7

<div id="myNum" style="width: 100%">
        <input id="myNum_Text" type="text" style="float: left; height: 22px; width: 90%" />
        <div id="myNum_UpButtonContainer" style="float: left; height: 11px; width: 16px;">
11
        </div>
        <div id="myNum_DownButtonContainer" style="float: left; height: 11px; width: 16px;">
22
        </div>
    </div>