Error creating columns in CSS

Asked

Viewed 52 times

-1

Colleagues.

I’ve taken over a project now with a ready-made structure, but I’m taking a beating with the site’s css. When another room is included in this project, the Divs are not aligned in 3. See: inserir a descrição da imagem aqui

The HMTL/PHP code:

while($jmSeg = mysqli_fetch_object($sqlSeg)){ ?>
<div class="hr-corpo">
        <div class="hr-container-campos">
                <p class="hr-container-campos-sala">SALA <?php  echo $jmSeg->sala; ?></p> <!-- SALA 01 -->
            <?php
                $sqlI = mysqli_query($conecta,"SELECT * FROM `horarios` WHERE dia = 'Segunda e Quarta' and sala = '".$jmSeg->sala."' and status = '1' ORDER BY hora");
                while ($horasI = mysqli_fetch_object($sqlI)) {
                    echo"<div class=\"hr-campos\">
                            <p><span class=\"hr\">".utf8_encode($horasI->hora)."</span><span class=\"hr-atividade\">".$horasI->atividade."</span><br/><span class=\"hr-professor\">Prof. ".$horasI->professor."</span></p>
                          </div>";
                 }
             ?>
          </div>
    </div>
</div>
<?php }  ?>

CSS:

.hr-corpo{
    width:30%; margin:0% 1.666666666666667% 4% 1.666666666666667%; background:rgba(0,0,0,0.0); min-height:10px; display:inline-block; padding:0%; float:left;}/*CORPO DA AGENDA*/

.hr-container-campos-sala{
    font-size:0.7em;}
css

  • If I understand correctly, you would like the Divs to be aligned in 3 columns and for example the div4 to be below the div1 and so on?

  • Hello, Will Ramos. Exactly. I’m sorry I can not pass more information, because as I said in the post, this project was already ready and when I took over, I realized that this occurs when includes more rooms.

1 answer

1


What you’re looking for is called masonry, and can be done using the "collumn" css properties, below is an example of the mobile responsiveness property.

CSS:

body { font: 1em/1.67 'Open Sans', Arial, Sans-serif; margin: 0; background: #e9e9e9; }
.wrapper { width: 95%; margin: 50px auto; }
.masonry { margin: 10px 0; padding: 0; column-gap: 10px; column-rule:dashed #FF0000 5px}
.item { display: inline-block; background: #fff; padding: 20px; margin: 0 0 10px 0; width: 100%;-webkit-box-sizing: border-box; }

@media only screen and (min-width: 400px) {
.masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
}

@media only screen and (min-width: 700px) {
.masonry { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
}

@media only screen and (min-width: 900px) {
.masonry { -moz-column-count: 10; -webkit-column-count: 5; column-count: 5; }
}

@media only screen and (min-width: 1280px) {
.wrapper { width: 1260px; }
}

HTML:

<div class="wrapper">
    <div class="masonry">
        <div class="item" style="height:180px">1asdasdasdadasd</div>
        <div class="item" style="height:180px">2asdasdasdadasd</div>
        <div class="item" style="height:270px">3asdasdasdadasd</div>
        <div class="item" style="height:260px">4asdasdasdadasd</div>
        <div class="item" style="height:200px">5asdasdasdadasd</div>
        <div class="item" style="height:260px">6asdasdasdadasd</div>
        <div class="item" style="height:160px">7asdasdasdadasd</div>
        <div class="item" style="height:100px">8asdasdasdadasd</div>
        <div class="item" style="height:170px">9asdasdasdadasd</div>
        <div class="item" style="height:300px">10asdasdasdadasd</div>
    </div>
</div>

  • Hello Will. Thank you.

Browser other questions tagged css

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