C# 框内有4个框，使用面板asp/css_C#_Asp.net_Html_Css

C# 框内有4个框，使用面板asp/css

c# asp.net html css

C# 框内有4个框，使用面板asp/css,c#,asp.net,html,css,C#,Asp.net,Html,Css,嗨，我想用面板做一个盒子，里面有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"> &l

嗨，我想用面板做一个盒子，里面有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>

Atm配线架6不在配线架4下方，配线架4-5-7都在正确的位置

不知道如何让第六组坐在第四组下方和第七组左侧。

Garrith，我相信这会让你得到你想要的结果：

   <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>


.第四个集装箱
{
显示：内联；
浮动：对；
宽度：476px；
高度：469px；
背景色：#4A4A4A；
边框：1px纯黑；
}
.左上角
{
显示：内联；
浮动：左；
宽度：238px；
高度：234px；
边界：0px；
}
.对
{
显示：内联；
浮动：对；
宽度：238px；
高度：234px；
边界：0px；
}
4.
5.
6.
7.

您发布的标记有几个问题：

面板6和7嵌套在面板5的内部（或者正如Joel指出的，您缺少5的关闭标签）

在另一个DIV内安装DIV（asp:panel渲染为DIV）时，有时需要将边框宽度设置为0。否则，边界像素（可见或不可见）将在div外部进行解释，并使div占用的空间=到border+div+border，并造成宽度或高度为1/2的两个div溢出其容器的情况

最后，我还建议您使用比asp:XXXX控件更多的本机HTML标记。当使用“runat='server'”标记创建时，HTML控件与服务器端的asp:控件具有同等的作用，但本机HTML控件的开销较低，并且正确使用时，与asp控件的对应控件相比，跨浏览器兼容性更强。大多数情况下，它可以让您更好地控制它们在运行时的渲染方式。在您的问题中，您可以简单地替换

或您拥有的任何地方和

。如果没有别的，那就是很少的按键

干杯

CEC

看起来您还没有关闭

panel5

。这是这篇文章的剪切/粘贴错误吗？@joel将您的评论作为答案移动，以便Garrith可以将其标记为answer@siri-谢谢，我不得不离开一会儿。老实说，我没有仔细观察，以判断这是否是整个问题，所以我没有张贴答案@加里斯，很高兴你把事情弄清楚了。

   <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>