Question

嗨，我试图用盒子作为盒子和盒子在盒子里面制作一个带有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都在正确的位置。

不确定如何让面板六坐在面板4下面和面板7的左侧。

Answer 1

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>

您发布的标记存在一些问题：

第6小组＆amp; 7嵌套在面板5内部（或者如Joel指出的那样，你有5个缺失的关闭标签。）
当在另一个Div内部装入DIV（一个asp：面板呈现为DIV）时，有时需要将边框设置为宽度为0.否则边框像素（可见或不可见）将被解释为div的外部，并将div占用的空间= BORDER + DIV + BORDER，并创建一个2宽度或高度的2个DIV溢出其容器的情况。
最后我还建议你使用比asp：XXXX控件更多的原生HTML标记。当使用“runat ='server'”标签创建时，HTML控件与服务器端的asp：控件相同，但是本机HTML控件的开销较低，正确使用时，与ASP控件相比，浏览器兼容性更高。大多数情况下，它可以让您更好地控制它们在运行时的渲染方式。在您的问题中，您只需替换<div> or </div> everywhere you have <asp:panel> and </asp:panel>即可。如果不出意外，只需点击几下。

干杯，

CEC

使用面板asp / css在盒子里面有4个盒子的盒子

1 个答案: