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

StackOverflow https://stackoverflow.com/questions/903002

  •  05-09-2019
  •  | 
  •  

题

我有一个面板位于 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

我很感激任何帮助！账单

有帮助吗？

解决方案

你需要两件事：

  1. A 清除样式表
  2. 浮动您的内板

漂浮很简单，但一开始有时会有点令人畏惧。 阅读这些教程 在花车上了解它们的所有信息。

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

float: left;

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

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

其他提示

面板通常应该，但并非总是如此，渲染为div标签，这些ID获得通过命名容器borked，所以更容易添加的CssClass属性..设定你的CSS相应。

如果你想overfow允许滚动，你会希望你的定位和高度设置为允许这一点。

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

应该这样做。 ：）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top