Colocar blocos lado a lado e centralizados sem saber quantos blocos serão

Omar~ · Maio 21, 2017

Já perdi uma horas tentando achar uma solução para isso, mas não obtive sucesso.

É o seguinte: Preciso criar divisores que vão se alinhar lado a lado e devem ficar no centro de outro divisor, o que até aí tudo bem, moleza.

O problema é: Acontece que vou buscar resultados em um banco de dados e no loop gerado vão ser criados blocos para cada resultado.

Digamos que eu vá buscar usuários cadastrados, logo terei logins, senhas e-mails etc.. Para cada usuário obtido quero criar um divisor que conterá seus dados.

Acontece que se houver 1 ou 2 ou mais resultados, ou seja independente da quantidade que obter deve-se criar 1 bloco para cada e cada bloco deve-se se alinhar ao centro em relação lado a lado com outros se houver mais de 1 resultado.

Obs.: Normalmente usaria uma "table", mas o website que estou a fazer recebe design responsivo e não estou afim de usar overflow para a tabela e sim como disse criar um divisor para cada resultado.

Acho que consegui explicar, mas se precisar de mais informações é só falar...

Vamos ao código criado para simular e fazer o teste.

Spoiler


<div class="caixa-mae">
    <div class="caixa-filha">
        <p><b>Login:</b> ABCDEFGHIJ</p>
        <p><b>Senha:</b> ABCDEFGHIJ</p>
        <p><b>E-Mail:</b> ABCDEFGHIJ</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="caixa-filha">
        <p><b>Login:</b> ABCDEFGHIJ</p>
        <p><b>Senha:</b> ABCDEFGHIJ</p>
        <p><b>E-Mail:</b> ABCDEFGHIJ</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div style="clear: both">
</div>

CSS


.caixa-mae {
    background-color: #e5e5e5;
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
    padding: 10px;
    font-size: 0.90em
}

.caixa-filha {
    float: left;
    border: 1px solid #bcbcbc;
    min-width: 340px;
    width: 38%;
    margin-right: 2%
}

No exemplo tenho 2 blocos, que deveriam se alinhar ao centro da div mãe, que deveria acontecer o mesmo se fosse 3 ou 1 divisor só.

A melhor alternativa que pensei para alinhar as div filhas lado a lado foi por meio float.

E então? Como vou fazer isso?

Omar~ · Maio 21, 2017

Resolvido!

Botei a cabeça para funcionar e conseguir resolver.

Para quem tiver o mesmo problema deixo aqui a solução para futuras consultas.

Spoiler


<!DOCTYPE html>
<html>
    <head>
        <title>Box Flexiveis indepedentes</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            * {
                margin: 0;
                padding: 0;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box
            }
            body {
                font-family: sans-serif;
                font-size: 62%;
                color: #656565;
                background-color: #dadada
            }
            main {
                font-size: 1.5em;
                background-color: #ffffff;
                /* Usei margin e padding mas funciona com width e height depente do resultado que queira obter */
                padding: 2%;
                margin: 2%
            }
            .caixa-mae {
                /* Centraliza todo texto em seu conteúdo assim levando as box para o centro */
                text-align: center;
                /* Deve possuir 100% de largura, para modificar sua largura
                deve-se modificar a largura o conteiner que ela se encontrar dentro */
                width: 100%
            }
            .caixa-filha {
                /* inline-block para exibir os divisores em lado a lado */
                display: inline-block;
                /* Pequena diferença na largura de meio porcento para distanciar um dos outros,
                nesso caso eu to tratando de apenas 2 blocos por linha,
                se queira mais blocos por linha deve-se reduzir seu tamanho
                calculando seu tamanho vezes a quantidade divida pelo divisor principal
                */
                width: 49.5%;
                /* Mímimo de 250px para mobiles bem antigos */
                min-width: 250px;
                /* Paga o texto que estava centralizado e devolve ao original */
                text-align: left;
                /* Um pequeno espaçamento dos corners*/
                padding: 2%;
                /* Um pequeno espaçamento ao topo para quando for exibido 1 bloco só por linha não fiquem colados */
                margin-top: 1%;
                background-color: #f5f5f5;
                border: 1px solid rgba(200,200,200,0.4)
            }
            .rodape {
                clear: both;
                margin-top: 30px;
                font-size: 1em;
                text-align: left;
                margin-left: 5%;
            }
            code {
                vertical-align: 0.14em;
                font-weight: bold
            }
            @media screen and (max-width: 565px) {
                .caixa-filha {
                    width: 100%
                }
            }
        </style>
    </head>
    <body>
        <main>
            <h1>Utilização de box flexiveis alinhados lado a lado e centralizados</h1>
            <p>Atenção: Para melhor uso deve-se utilizar corretamente as aplicações de media query em disign responsivo</p>
            <div class="caixa-mae">
                <div class="caixa-filha">
                    <p><b>Login:</b> ABCDEFGHIJ</p>
                    <p><b>Senha:</b> ABCDEFGHIJ</p>
                    <p><b>E-Mail:</b> ABCDEFGHIJ</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="caixa-filha">
                    <p><b>Login:</b> ABCDEFGHIJ</p>
                    <p><b>Senha:</b> ABCDEFGHIJ</p>
                    <p><b>E-Mail:</b> ABCDEFGHIJ</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="caixa-filha">
                    <p><b>Login:</b> ABCDEFGHIJ</p>
                    <p><b>Senha:</b> ABCDEFGHIJ</p>
                    <p><b>E-Mail:</b> ABCDEFGHIJ</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="caixa-filha">
                    <p><b>Login:</b> ABCDEFGHIJ</p>
                    <p><b>Senha:</b> ABCDEFGHIJ</p>
                    <p><b>E-Mail:</b> ABCDEFGHIJ</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="rodape">
                    <p>Este é um exemplo prático para criar blocos fexiveis alinhados em disign responsivo, sem usar float.</p>
                    <p>Por: Omar Fagundes</p>
                    <p style="color: #078700">Para melhor uso deve-se utilizar <code>@media screen</code>. E adaptar os box corretamente.</p>
                </div>
            </div>
        </main>
    </body>
</html>

Independente de quantas <div class="caixa-filha"> adicionar sempre estarão lado a lado e centralizadas.

Entrar

Arquivado

Colocar blocos lado a lado e centralizados sem saber quantos blocos serão

Recommended Posts

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante