1

Preciso alinhar esta div que está desalinhada conforme a imagem abaixo:

Obs.: Quero alinhar lado a lado, porque a div de cima está desalinhada, por conta do texto maior - Estou usando bootstrap.

inserir a descrição da imagem aqui CSS:

.edufair-blog-overlay {
    position: relative;
    background: #000;
    display: inline-block;
}

.edufair-single-blog{
    padding-bottom: 60px;
    display: inline-block;  
}

Estrutura da DIV html

<div class="row">
    <?php 
    if(count($cursos) > 0){ 
        foreach($cursos as $valor){ 
    ?>
    <div class="col-md-4">                      
        <div class="edufair-single-blog">                       
            <div class="edufair-blog-overlay">
              <img src="<?php echo base_url('admin/assets/uploads/'.$valor->imagem); ?>" alt="<?php echo $valor->titulo; ?>" class="edufair-blog-image">
              <div class="edufair-blog-middle"></div>
            </div>

            <div class="blog-content">

                <a href="<?php echo base_url('curso/detalhes/'.$valor->id.'/'.url_title($valor->titulo))?>" class="">
                    <h3><?php echo $valor->titulo; ?></h3>
                </a>
                <span><?php echo $categ[0]->titulo; ?></span>
                <p class="text-justify"><?php echo $valor->referencia; ?></p>                       

                <div class="blog-footer">
                    <a href="<?php echo base_url('curso/detalhes/'.$valor->id.'/'.url_title($valor->titulo))?>" class="edufair-course-text">Conhecer</a>
                </div>
            </div>                                  
        </div>                          
    </div>
    <?php 
        }
    } else {
    ?>
    <div class="col-md-12">
        <h3 class="text-center">Nenhum curso disponível nesta categoria.</h3>
    </div>
    <?php } ?>
</div>  

Código do Navegador renderizado:

        <div class="row">
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Informatica-Basica.png" alt="Informática Básica" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/5/informatica-basica" class="">
                            <h3>Informática Básica</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">Neste curso você aprenderá os conhecimentos básicos e indispensáveis para o uso do computador, desde o trabalho com arquivos de textos, planilhas eletrônicas, apresentação de Slides e a utilização da Internet.</p>                       

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/5/informatica-basica" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Informatica-Avanada.png" alt="Informática Avançada" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/6/informatica-avancada" class="">
                            <h3>Informática Avançada</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">Neste curso, o aluno irá conhecer a história do computador, as partes comuns de um computador e seus dispositivos. </p>                     

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/6/informatica-avancada" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Infomarica-Basica-e-Avanada.png" alt="Informática Básica & Avançada" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/7/informatica-basica-avancada" class="">
                            <h3>Informática Básica & Avançada</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">Neste curso, o aluno irá aprender tanto os conhecimentos básicos da informática como usar o computador, desde o trabalhar com arquivos de textos e etc.</p>                     

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/7/informatica-basica-avancada" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Excel-Avanado.png" alt="Excel Avançado" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/8/excel-avancado" class="">
                            <h3>Excel Avançado</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">É um programa de planilha eletrônica. A partir dele, é possível formatar e desenvolver planilhas, calcular custos, salários, demonstração de despesas, análise de gráficos, entre muitas outras funções. </p>                       

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/8/excel-avancado" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Design-Grafico.png" alt="Designer Gráfico" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/9/designer-grafico" class="">
                            <h3>Designer Gráfico</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">Neste curso o aluno aprende a utilizar as mais modernas ferramentas para criar e editar imagens, como também criar logomarcas, cartões de visita, folders, revistas e panfletos. </p>                       

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/9/designer-grafico" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Web-Design.png" alt="Web Design" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/10/web-design" class="">
                            <h3>Web Design</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">Neste curso o aluno aprende como estruturar e desenvolver um web site e criações de Arquivos para Web.</p>                      

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/10/web-design" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Auto-CAD.png" alt="AutoCAD" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/11/autocad" class="">
                            <h3>AutoCAD</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">O AutoCAD é um software para desenho técnico. Ele pode ser usado para desenho de móveis, circuitos eletrônicos, desenho mecânico, tubulações industriais, embalagens, topografia e projetos de construção civil.</p>                        

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/11/autocad" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Desenvolvedor-de-Games.png" alt="Desenvolvedor de Games" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/12/desenvolvedor-de-games" class="">
                            <h3>Desenvolvedor de Games</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">Nesse curso o aluno conhecerá diversos recursos utilizados no desenvolvimento de aplicativos, desde o básico até recursos mais avançados.</p>                       

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/12/desenvolvedor-de-games" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Desenvolvedor-de-Programas.png" alt="Desenvolvedor de Programas" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/13/desenvolvedor-de-programas" class="">
                            <h3>Desenvolvedor de Programas</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">O curso de Lógica de Programação da FATB tem por objetivo ensinar todos os conceitos fundamentais básicos da lógica de programação. </p>                        

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/13/desenvolvedor-de-programas" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Assistente-administrativo.png" alt="Assistente Administrativo" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/14/assistente-administrativo" class="">
                            <h3>Assistente Administrativo</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">Atua em grande parte na Gestão e Negócios, nos processos de movimentação e organizações de pequeno, médio e grande porte. manuseia mercadorias e valores monetários.</p>                        

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/14/assistente-administrativo" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Secretariado.png" alt="Secretariado" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/15/secretariado" class="">
                            <h3>Secretariado</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">O aluno será capacitados para auxiliar nas atividades administrativas, organizar documentações, emitir relatórios, encaminhar e arquivar documentos, cuidar da correspondência e documentos, auxiliar nos cálculos.</p>                     

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/15/secretariado" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Manuteno-de-Computador.png" alt="Manutenção de Computadores" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/16/manutencao-de-computadores" class="">
                            <h3>Manutenção de Computadores</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">Com este módulo, o aluno aprenderá as técnicas de montagem e manutenção de computadores e redes, identificando possíveis problemas e corrigindo-os de maneira eficiente. Assim, o aluno poderá prestar assistência técnica para empresas e pessoas físicas.</p>                     

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/16/manutencao-de-computadores" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                    <div class="col-md-4">                      
                <div class="">                      
                    <div class="edufair-blog-overlay">
                      <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Ingls.png" alt="Inglês" class="edufair-blog-image">
                      <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">                                  
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/17/ingles" class="">
                            <h3>Inglês</h3>
                        </a>
                        <span>Informática</span>
                        <p class="text-justify">O inglês é uma das línguas mais faladas no mundo e também é algo determinante em muitas empresas para realizar uma contratação.</p>                     

                        <div class="blog-footer">
                            <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/17/ingles" class="edufair-course-text">Conhecer</a>
                        </div>
                    </div>                                  
                </div>                          
            </div>
                                </div>
6
  • De que forma você quer alinhar? não ficou claro pra mim.
    – Renan
    31/10/2018 às 17:41
  • @RenanOsorio Quero alinhar lado a lado, porque a div de cima está desalinhada, por conta do texto maior 31/10/2018 às 17:42
  • André coloca o código completo ai, só com esse pedaço do CSS não dá para simular o problema e te propor uma resposta... Vc está usando Bootstrap 3 ou algum outro framework??
    – hugocsl
    31/10/2018 às 17:51
  • Estou usando bootstrap 31/10/2018 às 17:53
  • @hugocls prntscr.com/lcsod3 ele fica assim na view. Ai não dá certo 31/10/2018 às 17:56

2 Respostas 2

2

A melhor opção para não precisar recorrer a CSS customizado seria separa cada grupo de 3 col-md-4 em um .row conforme exemplo abaixo:

[class^="col-"] {
    padding: 10px;
    border: 1px solid;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col-xs-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ut dolore laborum assumenda, totam laboriosam eligendi enim similique quisquam beatae odit? Illum, quo sed. Sapiente minus commodi sequi dolorem sed.</div>
        <div class="col-xs-4">teste</div>
        <div class="col-xs-4">teste</div>
    </div>
    <div class="row">
        <div class="col-xs-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ut dolore laborum assumenda, totam laboriosam eligendi enim similique quisquam beatae odit? Illum, quo sed. Sapiente minus commodi sequi dolorem sed.</div>
        <div class="col-xs-4">teste</div>
        <div class="col-xs-4">teste</div>
    </div>
</div>

Mas casso o modelo acima não seja possível, vc pode fazer assim, usando flex e flex-wrap

[class^="col-"] {
    padding: 10px;
    border: 1px solid;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col-xs-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ut dolore laborum assumenda, totam laboriosam eligendi enim similique quisquam beatae odit? Illum, quo sed. Sapiente minus commodi sequi dolorem sed.</div>
        <div class="col-xs-4">teste</div>
        <div class="col-xs-4">teste</div>

        <div class="col-xs-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ut dolore laborum assumenda, totam laboriosam eligendi enim similique quisquam beatae odit? Illum, quo sed. Sapiente minus commodi sequi dolorem sed.</div>
        <div class="col-xs-4">teste</div>
        <div class="col-xs-4">teste</div>
    </div>
    </div>

9
  • Não deu certo, não consegui aplicar na classe que te mostrei antes. 31/10/2018 às 18:09
  • @AndréBaill Qual das opções que dei não deu certo ai? A separando de 3 em 3 col-md-4, ou a que tem que colocar display:flex e flex-wrap:wrap; na ROW pai? Se aqui no exemplo funcionou ai tb tem que funcionar, a não ser que tenha algum outro css que vc fez sobrescrevendo o que eu fiz...
    – hugocsl
    31/10/2018 às 18:12
  • Hm mas ai vou ter que alterar a estrutura do PHP, porque ele tá repetindo as classes do col-md-4 31/10/2018 às 18:15
  • @AndréBaill então coloca no seu CSS assim .row { display: flex; flex-wrap: wrap; } ou cria uma classe pra .row tipo <div class="row meu-grid"> e no CSS cria .row.meu-grid { display: flex; flex-wrap: wrap; }
    – hugocsl
    31/10/2018 às 18:18
  • Entendi, mas acho que a minha estrutura está errada, porque não deu certo... de nenhuma das formas 31/10/2018 às 18:21
2

Fiz um exemplo, acho que é isso que você precisa.

Para alinhar itens eu indico o FlexBox CSS.

Da uma olhada aqui:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div style="height:100px">1</div>
  <div style="height:200px">2</div>
  <div style="height:300px">3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

Foi o que eu entendi. espero ter ajudado.

3
  • 1
    Vou tentar explicar, gostaria que todas as divs se ajustassem do mesmo tamanho, conforme o texto da primeira div, normalmente, ai ela alinha as demais, pra não ficar desalinhado os de baixo... 31/10/2018 às 17:55
  • prntscr.com/lcsod3 31/10/2018 às 17:56
  • 1
    Faz o seguinte, olha esse exemplo jsfiddle.net/6vLprqys nele você consegue limita o texto na div, assim a div vai fica no mesmo tamanho q as outras. o que acha?
    – Renan
    31/10/2018 às 18:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .