如何在 ASP.NET 中设置嵌套面板控件的样式

Question

我有一个面板位于 div 中，我想使用该面板作为容器来添加更多面板！ 为什么我要向面板添加面板？ 因为我添加到现有面板的面板也包含对象，但仅包含图像和标签。

现有的主容器面板是在设计时创建的，并有一个可爱的名字“toolboxpanel”。 在运行时，我有一个 for/next 循环，动态创建图像、标签，将它们添加到面板中，然后将该面板添加到工具箱面板中，如下所示：

For i = 0 To imageholder.Count - 1 'create a control
        insertpanel = New Panel 'these object types have been DIM'd up above
        insertimage = New Image
        inserttext = New Label
        inserttext.ID = "text" + partnumberholder(i) + i.ToString 'the "holder" arrays hold the goodies from my db
        inserttext.Text = brandholder(i) + " " + partnumberholder(i)
        insertimage.ID = "image" + partnumberholder(i) + i.ToString
        insertimage.ImageUrl = ".\Images\Display\" + imageholder(i) + ".jpg"
        insertpanel.CssClass = "drag" 'this allows the panel to be dragged around using a JQuery script elsewhere
        'insertpanel.BackImageUrl = "~\Images\Display\" + imageholder(i) + ".jpg" 'commented out because this method looks awful
        insertpanel.ID = "panel" + partnumberholder(i) + i.ToString

        insertpanel.Controls.Add(insertimage)
        insertpanel.Controls.Add(inserttext)
        toolboxpanel.Controls.Add(insertpanel)
    Next

问题是，我添加的每个面板面板被塞进 1 列，完全违反了工具箱面板的 css 规则，即最大高度仅为 700px。 它似乎将面板及其所在的 div 拉伸到比预期高得多！

我的主要问题是：

1）如何获取它，以便我可以将面板对象（带有我的图像/标签内容）添加到主面板，使其显示 3 列、固定的可视高度和整洁的滚动条？

2）有更好的方法吗？ 一定有:(

你可以在以下网站的主页上看到当前的混乱情况： http://www.mobiuspc.com

我感谢任何帮助！ 账单

Answer 1

您需要两件事：

1. clearfix 样式表
2. 浮动内部面板

浮动很简单，但可以有时一开始会有点令人畏惧。 阅读这些关于浮动的教程以了解有关它们的所有信息。

本质上，您需要做的就是将以下样式添加到内部面板的样式中：

float: left;

浮动会自动使 div 及其所有内容尽可能窄，因此请务必指定宽度 ，正如您已经拥有的那样。

接下来，您需要将clearfix样式应用到外部面板，以便其中的所有浮动内容都不会受到“断头台效应”的影响。 由于浮动块没有“布局”，因此它们不是正常文档流的一部分，因此会被其父容器忽略。 ClearFix 通过强制容器将浮动识别为具有布局来解决这个问题。

Answer 2

面板通常（但并非总是）呈现为 div 标签，ID 会被命名容器破坏，因此更容易添加 cssclass 属性。相应地设置你的 css。

如果您希望溢出以允许滚动，您需要将您的定位和高度设置为允许滚动。

.myContainter {
    position: relative; /* or absolute, or a float */
    height: 700px;
    overflow: auto;
}

应该这样做。 :)