table 布局 如何改用CSS布局
0
悬赏园豆：10
[已解决问题]
解决于 2012-09-18 13:41
以下是我的代码(已经精简了),全部用table来布局,左边是treeview控件 ,右边是一些textbox,但是treeview因为数据的原因,会拉得很长,弄得右边的textbox每行之间的间距也是很大. 所以我要改用CSS定位,但不知道如何写呀,请高人给点提示吧,非常感谢.
<table class="style3">
<tr>
<td class="style4" rowspan="9">
<asp:TreeView ID="TreeView1" runat="server"
onselectednodechanged="TreeView1_SelectedNodeChanged" Width="205px"
BorderColor="#3399FF"
</asp:TreeView>
</td>
<td class="style5">
<asp:Button ID="AAA" runat="server" onclick="AAA_Click" Text="分类保存"
Width="57px" />
</td>
</tr>
<tr>
<td class="style5">
<asp:Label ID="Label2" runat="server" Text="编号"></asp:Label>
<asp:TextBox ID="txtno" runat="server" Width="126px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
<asp:Button ID="AB" runat="server" onclick="AB_Click" Text="保存"
UseSubmitBehavior="False" Width="75px" />
</td>
</tr>
<tr>
<td class="style5">
<asp:Label ID="Label6" runat="server" Text="设备归类"></asp:Label>
<asp:TextBox ID="txfi01" runat="server" Width="61px" ReadOnly="True"></asp:TextBox>
<asp:Label ID="Label5" runat="server" Text="设备编号"></asp:Label>
<asp:TextBox ID="txno" runat="server" Width="147px"></asp:TextBox>
<asp:Label ID="Label7" runat="server" Text="规格型号"></asp:Label>
<asp:TextBox ID="txfi02" runat="server" Width="158px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style5">
<p>
<asp:Label ID="Label9" runat="server" Text="使用部门"></asp:Label>
<asp:TextBox ID="txfi06" runat="server" Width="101px"></asp:TextBox>
<asp:Label ID="Label10" runat="server" Text="状态"></asp:Label>
<asp:DropDownList ID="txfi07" runat="server" Width="100px">
</asp:DropDownList>
<asp:Label ID="Label11" runat="server" Text="备注"></asp:Label>
<asp:TextBox ID="txfi08" runat="server" Width="447px"></asp:TextBox>
</p>
</td>
</tr>
</table>
最佳答案
0
不要全放一个table里，右边再套一个table,这是最好的办法
收获园豆：4
其他回答(4)
0
<html> <head> <style type="text/css"> div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; } div.header,div.footer { padding:0.5em; color:white; background-color:gray; clear:left; } h1.header { padding:0; margin:0; } div.left { float:left; width:160px; margin:0; padding:1em; } div.content { margin-left:190px; border-left:1px solid gray; padding:1em; } </style> </head> <body> <div class="container"> <div class="header"><h1 class="header">W3School.com.cn</h1></div> <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div> <div class="content"> <h2>Free Web Building Tutorials</h2> <p>At W3School.com.cn you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div> <div class="footer">Copyright 2008 by YingKe Investment.</div> </div>
像这样就行了设置一下div的float属性就行
收获园豆：3
0
不要全放一个table里，右边再套一个table。
<table> <tr> <td>树</td> <td valign="top"> <table> <tr><td>TexBox1</td></tr> <tr><td>TexBox2</td></tr> <tr><td>TexBox3</td></tr> </table> </td> </tr> </table>
收获园豆：1
0
保存你的文件问htm然后用dreamweaver打开，视图直接布局，会自动生成css代码
兼容性还不错
收获园豆：2
0
用框架布局不行吗？iframe蛮好的