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

本文关键字：盒子 asp css 4个 | 更新日期: 2023-09-27 17:48:55

我想做一个盒子，里面有四个盒子，使用面板作为盒子和盒子。

<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 for panel: 
.onthefly 
{
    display: inline;
    float: right;
}
.onthefly1 
{
    display: inline;
    float: left;
}

Atm面板6不在面板4的下面，面板4 - 5 - 7都在正确的位置。

不知道如何让面板6位于面板4的下方和面板7的左侧

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

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>

你发布的标记有几个问题:

  1. 面板6 &7嵌套在面板5内(或者你有一个丢失的关闭标签5如乔尔指出)
  2. 当在另一个DIV内拟合DIV (asp:panel被渲染为DIV)时，有时需要将边框宽度设置为0。否则，边界像素(可见或不可见)将在div之外进行解释，并使div占用的空间= border +div + border，并造成2个div宽度或高度为1/2的情况溢出其容器。
  3. 最后，我还建议您使用比asp:XXXX控件更多的本地HTML标记。当使用"runat='server'"标签创建HTML控件时，HTML控件与服务器端的asp控件是平等的，但是本地HTML控件的开销更低，如果正确使用，则比asp控件更具跨浏览器兼容性。大多数情况下，它让你更多地控制它们在运行时的渲染方式。在你的问题中，你可以简单地替换<div> or </div> everywhere you have <asp:panel> and </asp:panel>。不出意外的话，只需敲击几下键盘即可。

欢呼,

CEC

相关文章：