Height alignment of different divs with multiple columns and rows

Question

Height alignment of different divs with multiple columns and rows

Navigation

#1 by (0 votes)

0

I'm trying to make a height alignment of different divs (with css only), but after many attempts I still can not get the best answer.

In mobile the designer made a carrousel (swiper):

Ondesktopitisnecessarytousethisway:

Theproblemisasfollows:

BecauseoftheswiperinmobileIamusingfourdifferentcolumnsandwithinthemtherespectiverows.

WhatI'mtryingtodoiskeepthesameheightforallcss-onlyrows,inordertolineupthecontentasthedesignerdrewit,buttheonlyresultIcouldgetwasthis:

Exampleofmyproblem: link

Hugs!

html html5 css flexbox flex

asked by anonymous 02.10.2017 / 18:40

1 answer

php file_get_contents follow url How to listen to a Socket connection on Android

score 0 · Answer 1

So I understand that you want the items to align, something similar to a table , but keeping the flexboxes ...

.tabela {
   display: flex;           display: -webkit-flex;
  flex-direction: row;     -webkit-flex-direction: row;
  flex-grow: 1;            -webkit-flex-grow: 1;
  flex-wrap: wrap;         -webkit-flex-wrap: wrap;
  width: 100%;
  //padding-left: 15px;
  //padding-right: 15px;
}
.tabela div {
  flex-grow: 1;            -webkit-flex-grow: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px black solid;
  width: auto;
  flex-wrap: wrap;
}

  <div class="tabela">
    <div class="titulo">
       <img src="https://fakeimg.pl/50/"></div><divclass="carga">
      <img src="https://fakeimg.pl/50/"></div><divclass="capacidade">
      <img src="https://fakeimg.pl/50/"></div><divclass="interior">
      <img src="https://fakeimg.pl/50/"></div><divclass="comprimento">
      <img src="https://fakeimg.pl/50/"></div><!--assimpordiante--></div><divclass="tabela">
    <div class="titulo">
       <div>carga <br> carga <br> carga <br> carga</div>
    </div>
    <div class="carga">
      <div>carga</div>
    </div>
    <div class="capacidade">
      <div>carga</div>
      <div>carga</div>
    </div>
    <div class="interior">
      <div>carga</div>
      <div>carga</div>
    </div>
    <div class="comprimento">
      <div>carga</div>
      <div>carga</div>
      <div>carga</div>
      <div>carga</div>
    </div>
  </div>
    <div class="tabela">
    <div class="titulo">
       <div>capacidade</div>
    </div>
    <div class="carga">
      <div>capacidade</div>
      <div>capacidade</div>
      <div>capacidade</div>
    </div>
    <div class="capacidade">
      <div>capacidade</div>
    </div>
    <div class="interior">
      <div>capacidade
      <br>capacidade
      <br>capacidade</div>
    </div>
    <div class="comprimento">
      <div>capacidade</div>
      <div>capacidade</div>
    </div>
  </div>

It would be somewhat similar to this structure, pay attention to the prefixes for browsers (some I did not put), and also link