Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

atomicBRblaster

Layout Colunas tamanhos diferentes

Por , em Desenvolvimento frontend

Recommended Posts

atomicBRblaster    1

atomicBRblaster
Postado

Pessoal,

 

Estou criando um painel com boxes com expand e collapse com gráficos e informações de servidores monitorados, mas não sou exatamente um entendedor de CSS e para minha necessidade, imaginei a seguinte situação:

 

.box100

.box50

.box33

 

ou seja: 3 classes com boxes de largura 100%, 50% e 33,3% do container e preciso dispô-las de maneira que quando aplicada a div a classe "box100" ela ocupe "uma linha" (colspan 3?).

 

por conseguinte, quando aplicada a classe "box50" a próxima linha deverá ser dividida igualmente ao meio, suponho que usarei dois boxes nesta.

 

e por fim, quando utilizada a classe "box33", a próxima linha deverá ser dividida em 3 partes iguais, formando então, 3 colunas de tamanhos igualmente distribuídos nesta.

 

formando algo assim:

____________________________________
|                                  |
|                                  |
|__________________________________|
|                |                 |
|                |                 |
|________________|_________________|
|          |           |           |
|          |           |           |
|__________|___________|___________|

Alguém pode me ajudar com essa?

 

Obrigado! =D

 

Ótimo final de semana a todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

atomicBRblaster    1

atomicBRblaster
Postado

Para exemplificar a estrutura do html, segue o body:

 

<body>
	<div class="container">
		<div class="header"></div>
		<div class="page-content">
			<div class="lin">
				<div class="col col100">COL 100%</div>
			</div>
			<div class="lin">
				<div class="col col50">COL 50%</div>
				<div class="col col50">COL 50%</div>
			</div>
			<div class="lin">
				<div class="col col33">COL 33%</div>
				<div class="col col33">COL 33%</div>
				<div class="col col33">COL 33%</div>
			</div>
		</div>
	</div>
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito