Como estilo aninhado controles do painel em ASP.NET

Question

Eu tenho um painel sentado em uma div, e quero usar esse painel como um recipiente para adicionar mais painéis! Por que eu iria querer adicionar um painel a um painel? Porque o painel que eu estou adicionando ao painel existente, também é feito para conter objetos, mas apenas e imagem e etiqueta.

O painel recipiente mestre existente é criado durante o tempo de design, e vai pela adorável nome de "toolboxpanel". Durante o tempo de execução, eu tenho um for / próximo loop que cria dinamicamente uma imagem, um rótulo, adiciona-los tanto para um painel, em seguida, acrescenta que o painel à toolboxpanel, como pode ser visto aqui:

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

O problema é que cada painel para adicionar ao painel fica recheado em uma coluna e viola totalmente as regras CSS do toolboxpanel que dizem altura máxima é de apenas 700px. Parece para esticar o painel, eo div seu sentado, a forma mais elevada do que seu suposto ser!

As minhas principais perguntas são:

1) Como faço para obtê-lo para que eu possa adicionar objetos de painel (com a minha imagem coragem / label) ao painel principal de uma forma onde ele irá exibir com 3 colunas, altura visível fixo, e barra de rolagem arrumado?

2) Existe uma maneira melhor de fazer isso? Tem que haver: (

Você pode ver a confusão atual na página inicial do: http://www.mobiuspc.com

Agradeço qualquer ajuda! Bill

Answer 1

Você precisa de duas coisas:

1. A clearfix estilo
2. Para flutuar seus painéis internos

flutuante é simples, mas às vezes pode ser uma assustadora pouco no início. Leia estes tutoriais em carros alegóricos para aprender tudo sobre eles.

Essencialmente, tudo que você precisa fazer é adicionar o seguinte estilo para estilos de seus painéis internos:

float: left;

flutuante irá automaticamente fazer a div, e todo o seu conteúdo, o mais estreito possível, isso não deixe de especificar uma largura , como você já tem.

Em seguida, você vai precisar para aplicar o estilo clearfix ao seu painel exterior para que todos os conteúdos que flutuam dentro dela não sofrem o "efeito guilhotina". Porque blocos flutuantes não tem "layout", eles não são parte do fluxo de documentos normal, e, portanto, são ignorados por seus recipientes pai. Os resolve clearfix isto forçando o recipiente para reconhecer carros alegóricos como tendo layout.

Answer 2

Os painéis devem geralmente, mas nem sempre, processar como tags div, os IDs se borked pelo contêiner de nomeação, de modo mais fácil adicionar um atributo cssclass .. o conjunto de seu css em conformidade.

Se você quiser overfow para permitir a rolagem, você vai querer o seu posicionamento, e um conjunto de altura para permitir isso.

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

deve fazê-lo. :)