How do you fit these elements together? [duplicate]

Question

How do you fit these elements together? [duplicate]

Navigation

#1 by (-1 votes)

2

IwouldliketoknowhowIcanfittheseelements,Iwouldlikeitwhenthetopandbottomonescomerightbelow.HowcanIdothis?

Here'sthehtml:

<?php$postagens=timeline($conexao);foreach($postagensas$time):?><divclass="margem-topo-20 sombra-suave" id="timeline">

            <img src="envios/<?=$time['img'];?>" id="time-img" />
            <h2><?=$time['titulo'];?></h2>
            <p><?=nl2br($time['texto'])?></p>
            <a href="http://<?=$time['site'];?>" target="_blank"><?=$time['site'];?></a><br>
            <p class="icones icone-olho-aberto margem-topo-5"><span class="margem-esquerda-5"><?=$time['visualizacoes'];?></span></p>
          </div>

        <?php  
        endforeach
      ?>
  </section>

Here's the css code I'm using:

#timeline {

  width: 22%;
  background-color: #fff9f1;
  padding: 10px;
  border: 1px solid #fff9f1;
  border-radius: 5px;
  margin: 5px;
}

#time-flex {

  display: flex;
  align-items: flex-start;
  flex-flow:wrap;
}

css

asked by anonymous 25.10.2017 / 23:34

1 answer

Chart.js does not appear How to sort a list in alphabetical order? [duplicate]

score -1 · Answer 1

Some time ago I did an implementation that solved a similar problem.:

JsFiddle: link

var content = document.getElementById("container");
var content = document.getElementById("content");
var buttons = document.querySelectorAll("#menu input[data-color]");

var random = function (min, max) {
  return Math.floor(Math.random() * max) + min;
}

var width = 240;
var boxes = [];
var cores = ["teal", "indigo", "deep-orange", "blue-gray"];
for (var indice = 0; indice < 24; indice++) {
  var cor = cores[indice % 4];
  var box = document.createElement("div");
  box.classList.add("box");
  box.classList.add(cor);
  box.style.width = (width - 10) + "px";
  box.style.height = random(120, 180) + "px";
  content.appendChild(box);
  boxes.push(box);
}

var currentWidth = 0;
var onWindowResize = function (force) {
  var newWidth = window.innerWidth - window.innerWidth % width;
  if (currentWidth != newWidth || force) {
    content.style.width = newWidth + "px";
    currentWidth = newWidth;
    
    var colunas = [];
    var limite = currentWidth / width;
    for (var indice = 0; indice < limite; indice++) {
      colunas.push(0);
    } 
    
    boxes.forEach(function (box, indice) {
      if (!box.classList.contains("hide")) {
        var minimo = Math.min.apply(null, colunas);
        var indice = colunas.indexOf(minimo);
        box.style.top = colunas[indice] + "px";
        box.style.left = (width * indice) + "px";      
        colunas[indice] += box.offsetHeight + 10;
      }
    });
  }  
}

var onColorClick = function (event) {
  var cor = event.target.dataset.color;
  var todos = !cor;
  boxes.forEach(function (box, indice) {
    if (!todos && !box.classList.contains(cor)) {
      box.classList.remove("show");
      box.classList.add("hide");
    } else if (box.classList.contains("hide")) {
      box.classList.remove("hide");
      box.classList.add("show");
    }    
  });
  onWindowResize(true);
}

window.addEventListener("resize", function () {
  onWindowResize(false);
});

[].forEach.call(buttons, function (button, indice) {
  button.addEventListener("click", onColorClick);  
});

onWindowResize(false);

html, body {
  overflow: auto;
}

#menu {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 40px;
  padding: 10px;
  text-align:center;
  background-color: gainsboro;
  box-shadow: 0px 0px 10px black;
  box-sizing: border-box;
}

#container {
  position: fixed;
  overflow: auto;
  top: 40px;
}

#content {
  position: absolute;
  top: 0px;
}

#container, #content {
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
}

.box {
  position: absolute;
  border-radius: 5px;
  box-shadow: 0px 0px 5px black;
  margin: 5px;
  transition-property: top, left;
  transition-duration: 0.5s;
  transition-timing-function: linear;  
}

.hide {
  -webkit-animation: hide 0.5s linear;
  -webkit-animation-fill-mode: forwards;
}

.show {
  -webkit-animation: show 0.5s linear;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes hide {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}

@-webkit-keyframes show {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.teal {
  background-color: #009688
}

.indigo {
  background-color: #3F51B5
}

.deep-orange {
  background-color: #FF5722
}

.blue-gray {
  background-color: #607D8B
}

<div id="menu">
  <input type="button" data-color="" value="Todas" />
  <input type="button" data-color="teal" value="Teal" />
  <input type="button" data-color="indigo" value="Indigo" />
  <input type="button" data-color="deep-orange" value="Deep Orange" />
  <input type="button" data-color="blue-gray" value="Blue Gray" />
</div>
<div id="container">
  <div id="content">

  </div>
</div>