How to group elements dynamically regardless of size?

Question

How to group elements dynamically regardless of size?

Navigation

#1 by (-1 votes)

1

I have a% of parent% that is responsible for grouping certain amounts of children.

The problem is that this div must always be left-aligned, without leaving any blanks, but each parent div has a different number of child elements.

This causes each parent div to have a different height, and consequently, div in some cases causes an element to be right-aligned, leaving a huge amount of white space to the left. That's when there's no space left over.

I'll illustrate the problem I have with two images:

Problem

Desiredsolution

css

asked by anonymous 07.08.2015 / 15:11

1 answer

How to use C # Windows Forms with Firebird and Object Orientation? [closed] Update running multiple times in a single instance

score -1 · Answer 1

try to use the following% wrapper that should work:

#conteudo {
  float: left;
  width: 80%;
  height: 400px:
}
#barra-lateral {
  float: right;
  width: 20%;
  height: 400px;:
}

.item {
  background-color: red;
  display: inline-block;
  margin: 10px;
}

#conteudo .item {
  width: 100px;
  height: 100px;
}

#barra-lateral .item {
  width: 95%;
  height: 95%
}

<div id="conteudo">
  <div class="item">1</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
<div id="barra-lateral">
  <div class="item">2</div>
</div>