文章/答案/技术大牛

发布

社区首页 >问答首页 >框内有4个框，使用面板asp/css

问框内有4个框，使用面板asp/css
EN

Stack Overflow用户

提问于 2011-04-04 00:18:58

回答 1查看 690关注 0票数 0

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

自动柜员机6号盘不在4号盘下面，4-5-7号盘都在正确的位置。

不知道如何让6号面板坐在4号面板下方和7号面板的左边。

asp.net

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-04-04 01:45:05

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和7嵌套在面板5中(或者像Joel指出的那样，你有一个缺失的5的结束标记)。
当在另一个DIV中安装一个Div (asp:面板被渲染为DIV)时，有时需要将边框的宽度设置为0。否则边框像素(可见或不可见)将在div之外解释，并使div占用的空间=边框+ DIV +边框，并造成1/2宽度或高度的2个DIV溢出其container.
Finally的情况。我还建议您使用更多的原生HTML标记，而不是asp:XXXX控件。当使用"runat=' server '“标记创建HTML控件时，HTML控件与服务器端的ASP :控件具有相同的性能，但本地HTML控件的开销更低，并且在正确使用时，与ASP控件的副本相比，具有更强的跨浏览器兼容性。大多数情况下，它可以让你更好地控制它们在运行时的渲染方式。在您的问题中，您可以简单地替换为<div> or </div> everywhere you have <asp:panel> and </asp:panel>。如果没有别的，那就是很少的击键。

干杯,

CEC

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5530791

复制

相似问题

问框内有4个框，使用面板asp/css
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问框内有4个框，使用面板asp/cssEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问框内有4个框，使用面板asp/css
EN