嗨，我正在尝试使用面板作为盒子和盒子来制作一个盒子，里面有 4 个盒子。
<asp:Panel ID="Panel1" CssClass="onthefly" runat="server" BackColor="#4A4A4A" Height="469px"
Width="476px">
<asp:Panel ID="Panel4" runat="server" CssClass="onthefly1" Height="210px"
Width="235px">
</asp:Panel>
<asp:Panel ID="Panel5" runat="server" CssClass="onthefly" Height="210px"
Width="240px">
<asp:Panel ID="Panel6" runat="server" CssClass="onthefly1" Height="210px"
Width="240px">
</asp:Panel>
<asp:Panel ID="Panel7" runat="server" CssClass="onthefly" Height="210px"
Width="240px">
</asp:Panel>
</asp:Panel>
面板的 CSS:
.onthefly
{
display: inline;
float: right;
}
.onthefly1
{
display: inline;
float: left;
}
Atm 面板 6 不在面板 4 下方，面板 4 - 5 - 7 都在正确的位置。
不确定如何让面板 6 位于面板 4 的下方和面板 7 的左侧。
最佳答案
加里斯， 我相信这会给你带来你想要的结果:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.onthefly_container
{
display: inline;
float: right;
width: 476px;
height: 469px;
background-color:#4A4A4A;
border: 1px solid black;
}
.onthefly_left
{
display: inline;
float: left;
width: 238px;
height: 234px;
border: 0px;
}
.onthefly_right
{
display: inline;
float: right;
width: 238px;
height: 234px;
border: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server" CssClass="onthefly_container">
<asp:Panel ID="Panel4" runat="server" CssClass="onthefly_left">4
</asp:Panel>
<asp:Panel ID="Panel5" runat="server" CssClass="onthefly_right">5
</asp:Panel>
<asp:Panel ID="Panel6" runat="server" CssClass="onthefly_left">6
</asp:Panel>
<asp:Panel ID="Panel7" runat="server" CssClass="onthefly_right">7
</asp:Panel>
</asp:Panel>
</form>
</body>
</html>
您发布的标记存在一些问题:
- 面板 6 和 7 嵌套在面板 5 的内部(或者正如 Joel 指出的那样，您缺少 5 的关闭标记。)
- 在另一个 Div 中安装一个 DIV(asp:panel 呈现为 DIV)时，有时需要将边框宽度设置为 0。否则边框像素(可见或不可见)将被解释为在 div 外部，并使 div 占用的空间 = BORDER + DIV + BORDER 并造成 2 个 1/2 宽度或高度的 DIV 溢出其容器的情况。
- 最后，我还建议您使用比 asp:XXXX 控件更多的 native HTML 标记。当使用“runat='server'”标签创建时，HTML 控件与服务器端的 asp:controls 具有同等地位，但 native HTML 控件的开销较低，如果使用得当，与对应的 ASP 控件相比，跨浏览器的兼容性更高。大多数情况下，它可以让您更好地控制它们在运行时的呈现方式。在您的问题中，您可以简单地替换
<div> or </div> everywhere you have <asp:panel> and </asp:panel>.如果不出意外，那就是几次击键。
干杯，
中电协
关于c# - 使用面板 asp/css 框内有 4 个框的框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5530791/