How To Align Labels On A Div Layout

I have a html table, which shows informations about a movie. I am trying to change this table to a div layout because of the responsiveness. With table when I reduce the window wid

Solution 1:

First of all, if responsiveness is what you're after, you need to find the way to employ a responsive framework, Boostrap or Material UI (flexbox base) This will solve a lot of your problems at different brakpoints of the viewport without bloating your stylesheet with media queries. Second, you need to modify your HTML to allow for compartmentalization of containers. Responsiveness works best when you use compartmentalization and specificity.

Here is how I would rework your HTML and solve the alignment issue with fair amount of CSS

.row {
    width: 100%;
    display: inline-block;
    margin: 10px auto;
    background: green;
}

.col4 {
    display: inline-block;
    width: 33.33333333%;
    margin: 1%01%0;
    position: relative;
    padding-right: 15px;
    float: left;
    padding-left: 15px;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.col4div{
    display: inline-block;
}

label{
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

<divclass="row"><divclass="col4"><div><label>Nome:</label><span>Del Toro</span></div><div><label>Categoria de produto:</label><span>Diverso</span></div></div><divclass="col4"><div><label>Data de cadastro:</label><span>19/05/2017</span></div><div><label>Ultimo Prêmio:</label><span>Leão De Ouro</span></div></div><divclass="col4"><div><label>Data de atualizacao:</label><span>19/05/2017</span></div><div><label>Filme Indicado:</label><span>Shape of Water</span></div></div></div>

See the example here in my CODEPEN (just change the values in your HTML)

Now, here is one with Bootstrap. Check out how I was able to produce the same and IT IS RESPONSIVE without making any additional media queries. Just by using the classes container, row, and col-xs-12 col-sm-4

Boostrap is very documented here

muito fácil, né!

Solution 2:

.blue-box{
  background: green;
  padding: 1rem;
}
.father{
  display: inline-block;
  margin: .5rem;
}
.label{
  font-weight: bold;
  float: left;
  width: 80px;
}
.content{
  float: left;
  width: 70px;
}

<divclass="blue-box"><divclass="father"><divclass="label">
  Nome:
  </div><divclass="content">
    Del Toro
  </div></div><divclass="father"><divclass="label">
  Data de cadastro:
  </div><divclass="content">
    19/05/2017
  </div></div><divclass="father"><divclass="label">
  Data de atualizacao:
  </div><divclass="content">
    19/05/2017
  </div></div><divclass="father"><divclass="label">
  Categoria de produto:
  </div><divclass="content">
    Diverso
  </div></div><divclass="father"><divclass="label">
  Ultimo Prêmio:
  </div><divclass="content">
    Leão de Ouro
  </div></div><divclass="father"><divclass="label">
  Filme indicado:
  </div><divclass="content">
    Shape of water
  </div></div></div>

Solution 3:

You can achieve almost the same result as table using DIV and CSS,

<divstyle="display: table;"><divstyle="display: table-row;"><divstyle="display: table-cell;">
      Gross but sometimes useful.
    </div></div></div>

have a look at https://css-tricks.com/almanac/properties/d/display/

the advantage of using this is that you have some extra features like vertical-align having it set up like this.

if you want me to modify your code to something like this. give me a buzz.