Ir para conteúdo

POWERED BY:

Arquivado

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

darksteel3000

Posicionar 5 divs lado a lado, MAS... as de baixo coladas as de cima

Por , em Desenvolvimento frontend

Recommended Posts

darksteel3000    0

darksteel3000
Postado

Amigos, tenho 5 divs que gostaria de alinha-las lado a lado, MAS... de duas em duas e a que ficasse em baixo fosse relativa a de cima (colada). Abaixo tem uma imagem que demonstra meu cenario atual:

 

capturar.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

androidel    7

androidel
Postado

Olá darksteel3000,

 

Utilize uma propriedade do CSS chamada float.

 

http://www.w3schools.com/cssref/pr_class_float.asp

 

É tipo assim?

 

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Página 001</title>
        <style type="text/css">
             * {
                 margin: 0;
                 padding: 0;
             }
            
             html, body, #container {
                 height: 100%;
             }
            
             #container {
                 position: relative;
             }
            
             .linha {
                 width: 100%;
                 height: 200px;
             }
            
             .coluna1 {
                 width: 50%;
                 height: 100%;
                 float: left;
             }
            
             .coluna2 {
                 width: 50%;
                 height: 100%;
                 float: left;
             }
            
             /* Personalizar cor de fundo */
             #l1c1 {
                 background-color: #f00;
             }
             #l1c2 {
                 background-color: #0ff;
             }
             #l2c1 {
                 background-color: #0f0;
             }
             #l2c2 {
                 background-color: #ff0;
             }
             #l3c1 {
                 background-color: #00f;
             }
             #l3c2 {
                 background-color: #f0f;
             }
             #l4c1 {
                 background-color: #333;
             }
             #l4c2 {
                 background-color: #666;
             }
            
        </style>
    </head>
    
    <body>
        <div id="container">
            <div class="linha">
                <div class="coluna1" id="l1c1">
                
                </div>
                <div class="coluna2" id="l1c2">
                
                </div>
            </div>
            <div class="linha">
                <div class="coluna1" id="l2c1">
                
                </div>
                <div class="coluna2" id="l2c2">
                
                </div>
            </div>
            <div class="linha">
                <div class="coluna1" id="l3c1">
                
                </div>
                <div class="coluna2" id="l3c2">
                
                </div>
            </div>
            <div class="linha">
                <div class="coluna1" id="l4c1">
                
                </div>
                <div class="coluna2" id="l4c2">
                
                </div>
            </div>
        </div>
    </body>
</html>

OBS: Lembre-se que dentro de container tem uma classe chamada "linha". Essa classe não há float, apenas as divs que estão dentro dessa div "linha". Entende?

 

Espero ter ajudado. ( '-' )

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