网页中的锚定控件就像 WinForm 应用程序一样答案

【问题标题】：Anchoring Controls in Web Page Just Like WinForm Applications网页中的锚定控件就像 WinForm 应用程序一样
【发布时间】：2013-07-05 08:17:26
【问题描述】：

我是 CSS 新手，也是 Web 开发新手。

windows应用程序中的控件有一个叫做anchor的属性，你可以在调整父容器大小时设置要调整控件的哪一部分。我正在网页中寻找相同的属性。

让我举个例子：

假设我们连续有一个textbox、一个button和一个label，我的问题是如何给label和button一个固定大小（比如说100px) 并使textbox 填充空间达到100%。

代码 sn-p 可能是这样的：

<div>
    <div style="float:left; width:100%;">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
    <div style="float:left; width:100px;">
        <asp:Button ID="Button1" runat="server"></asp:Button></div>
    <div style="float:right; width:100px;">
        <asp:Label ID="Lbl1" runat="server"></asp:Label></div>        
</div>

请注意示例代码是错误的，并强制按钮和标签进入新行。

谢谢

【问题讨论】：

标签： asp.net .net css web

【解决方案1】：

试试这个

<div>
    <asp:TextBox ID="TextBox1" Width="75%" Style="float: left;" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" Text="test" Width="10%" Style="float: right;" runat="server">
    </asp:Button>
    <asp:Label ID="Lbl1" Text="test" Width="10%" Style="float: right;" runat="server"></asp:Label>
</div>

【讨论】：

它会产生两条单独的行！我希望它们在同一行（只有一行）。
浮动：左；宽度：85%；文本框 div 的样式
设置为85%，当页面变小时，组件跳转到第二行。
它会导致按钮和标签调整大小，我希望它们固定，只有文本框调整大小！ :-) 就像在 Windows 窗体中锚定

【解决方案2】：

使用表格就可以了

<table style="width:100%">
   <tr>
      <td style="width:100%"> TextBox Here </td>
      <td style="width:1px"> label Here </td>
      <td style="width:1px"> button Here </td>
   </tr>
</table>

【讨论】：