Div is not aligning CSS

Asked

Viewed 80 times

1

I need to align this div that is misaligned as the image below:

Note: I want to line up side by side, because the top div is misaligned, because of the larger text - I’m wearing a 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;  
}

Structure of 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>

Code of the rendered browser:

        <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>
css twitter-bootstrap

  • How do you want to play along? It’s not clear to me.

  • @Renanosorio I want to line up side by side, because the top div is misaligned, on account of the larger text

  • André puts the complete code there, only with this piece of CSS can not simulate the problem and propose you a response... You are using Bootstrap 3 or some other framework??

  • I’m wearing a bootstrap

  • @hugocls http://prntscr.com/lcsod3 it looks like this in the view. It doesn’t work

  • Now I include html too

Show 1 more comment

2 answers

2

I made an example, I think that’s what you need.

To align items I indicate the Flexbox CSS.

Take a look here:

<!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>

That’s what I understood. I hope I helped.

  • 1

    I will try to explain, I would like all the Divs to fit the same size, as the text of the first div, normally, there it lines up the others, not to be misaligned the ones below...

  • http://prntscr.com/lcsod3

  • 1

    Do the following, look at this example https://jsfiddle.net/6vLprqys/ on it you can limit the text in the div, so the div will be the same size as the others. what you think?

2


The best option for not having to resort to custom CSS would be to separate each group from 3 col-md-4 in a .row as an example below:

[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>

But if the above model is not possible, you can do so, using flex and 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>

  • It didn’t work, I couldn’t apply in the class I showed you before.

  • @Which of the options I gave didn’t work out there? A separating from 3 in 3 col-Md-4, or the one that has to put display:flex and flex-wrap:wrap; on the parent ROW? If here in the example it worked ai tb has to work, unless there is some other css that you did overwriting what I did...

  • Hm but then I’ll have to change the structure of PHP, because it is repeating the classes of col-Md-4

  • @Andrébaill then puts it in his CSS like this .row {&#xA; display: flex;&#xA; flex-wrap: wrap;&#xA;} or create a class for . Row type <div class="row meu-grid"> and in CSS creates .row.meu-grid {&#xA; display: flex;&#xA; flex-wrap: wrap;&#xA;}

  • I get it, but I think my structure is wrong, because it didn’t work... either way

  • @Andrébaill checks there in the browser, gives a Ctrl+U and checks how is getting the structure of the HTML already rendered. Check if he is not creating . Row, or . containers more etc, check how it is mounting the html, and if possible edit your question and put this code that appears there in the browser!

  • I did it this way: . Row { display: flex; flex-wrap: wrap; } only the only thing that went wrong was the line... that one got higher and the other got lower because of the content...

  • @Andrébaill just you talking like that, I can’t visualize your problem.. tries to adjust with a margin-bottom in col-Md-4 to see if it solves... It looks like this: https://imgur.com/a/BoWksXq

  • Let’s go continue this discussion in chat.

Show 4 more comments

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.