C# 如何并排显示两个 asp:Panel 控件?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16544402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I display two asp:Panel controls side by side?
提问by Higune
I have two panels. I want to show them abreast, but they don't.
我有两个面板。我想向他们展示并排,但他们没有。
.aspx:
.aspx:
<asp:Panel ID="treeviewMenu" Width="20%" Height="500" runat="server" ScrollBars="Both" HorizontalAlign="Left">
<asp:TreeView ID="treeview" runat="server" ShowLines="True" ImageSet="XPFileExplorer" OnSelectedNodeChanged="treeview_SelectedNodeChanged">
</asp:TreeView>
</asp:Panel>
<asp:Panel ID="qvObjektMenu" Width="75%" Height="500" runat="server" HorizontalAlign="Right">
<asp:Table runat="server" HorizontalAlign="Right">
<asp:TableRow>
<asp:TableCell>
<asp:Label runat="server">
QVObjekt Id:
</asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:Label ID="qvObjektId" runat="server"></asp:Label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:Panel>
I have used a table outside this two elements, another Panel around them, nothing works. How can I resolve this?
我在这两个元素之外使用了一个表格,在它们周围使用了另一个面板,没有任何效果。我该如何解决这个问题?
采纳答案by Jeffrey Blake
The answer here is CSS. There are a few options for how to do it in CSS.
这里的答案是 CSS。有几个选项可以在 CSS 中实现。
Option 1: display:inline-block;
选项1: display:inline-block;
One option for that css is to use display: inline-block;:
该 css 的一种选择是使用display: inline-block;:
<style type="text/css">
.inlineBlock { display: inline-block; }
</style>
Coupled with setting it in the <asp:Panel ...>tags:
再加上在<asp:Panel ...>标签中设置它:
<asp:Panel ID="treeviewMenu" ... CssClass="inlineBlock">
...
</asp:Panel>
<asp:Panel ID="qvObjektMenu" ... CssClass="inlineBlock">
...
</asp:Panel>
Option 2a: float:left;
选项 2a: float:left;
Another option, as mentioned in Wim's answeris to use floats. But I do not think you want to combine both panels to have floats -- I suspect you only want one or the other. Either:
Wim 的回答中提到的另一种选择是使用浮点数。但是我不认为您想将两个面板结合起来以获得浮动 - 我怀疑您只想要一个或另一个。任何一个:
<style type="text/css">
.floatLeft { float: left; }
</style>
And
和
<asp:Panel ID="treeviewMenu" ... CssClass="floatLeft">
<asp:TreeView ID="treeview" runat="server" ShowLines="True" ImageSet="XPFileExplorer" >
</asp:TreeView>
</asp:Panel>
(with the other panel as it currently is in your markup)
(使用另一个面板,因为它当前在您的标记中)
OR
或者
Option 2b: float:right;
选项 2b: float:right;
<style type="text/css">
.floatRight { float: right; }
</style>
And
和
<asp:Panel ID="qvObjektMenu" ... CssClass="floatRight">
...
</asp:Panel>
回答by Wim Ombelets
Panels will be rendered as DIVelements so using css float:left, float:rightand marginshould work.
面板将被渲染为DIV元素,因此使用 css float:left,float:right并且margin应该可以工作。

