Error in creating columns in CSS

Question

Error in creating columns in CSS

Navigation

#1 by (1 votes)

-1

Colleagues.

I've taken a project now with a ready-made framework, but I'm taking a beating with the site's css. When one more room is included in this project, the divs are not aligned in 3. See:

TheHMTL/PHPcode:

while($jmSeg=mysqli_fetch_object($sqlSeg)){?><divclass="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

asked by anonymous 08.05.2017 / 23:14

1 answer

How to implement JasperReports and iReport (or Jaspersoft) in a reporting system? [closed] Display username after login

score 1 · Accepted Answer

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

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>