Problema na orientação das divs nas columns

[rikaschmitt 54]

Boa tarde.

Um tempo atrás criei um post aqui sobre como criar um sistema de blocos de conteúdos que vão se alocando em colunas automaticamente. O melhor resultado que obtive foi utilizando as propriedades "column" do CSS. Pelos testes que realizei, funcionaram de boa, mas depois que coloquei o conteúdo real das <div>, as colunas não ficaram como eu queria.

 

A estrutura é simples:

<div class="colunas">
  <div class="bloco">texto bloco 1</div>
  <div class="bloco">texto bloco 2</div>
  ...
</div>

.colunas { width:100%;
 -moz-column-count: 3; -moz-column-gap: 20px; -moz-column-fill: auto;
 -webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-fill: auto;
 column-count: 3; column-gap: 20px; column-fill: auto;
}
.bloco {
 width:300px;
 -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; column-break-inside: avoid;
}

O resultado deveria ser esse:

 

 

Até consigo obtê-lo. Mas por algum motivo que não compreendi ainda, se eu adiciono um texto muito grande em um bloco, ele acaba ficando somente em 2 colunas:

 

 

E se eu colocar um texto maior ainda, e mais blocos, ele chega num determinado momento que o bloco de texto começa no final da página e continua na coluna do lado:

 

Eu sei que este comportamento é o normal das colunas, mas eu queria que não tivesse essa quebra de conteúdos.. e que os blocos ficassem lado a lado, sempre, e se encaixando conforme for acrescentando mais blocos.

 

E ai?

 

 

Observação: no Firefox ele nem chega a orientar lado a lado, fica uma embaixo da outra.

[rikaschmitt 54]

Eu não consegui arrumar.

 

Parece que esse sistema de colunas é bem instável, pois você editando pelo firebug, só de alterar 1px ele corrige.. mas dai depois volta a ficar quebrado. Por fim, deixei como 2 colunas apenas, que funciona em todos os browsers... mas vou continuar pesquisando pra tentar deixar o layout das colunas como eu quero.

[Lucas Medina 17]

Opa!

Acho que eu entendi do que se trata. Você quer manter em três colunas, independentemente da altura, certo?

Eu normalmente faço um container para os itens, e deixo o conteúdo livre.

Daí eu ajusto a altura dos containers via Javascript. No caso, jQuery, caso você esteja utilizando.

 

Coloquei um exemplo no JSFiddle, veja se vale pra você!

 

http://jsfiddle.net/lucasmedina/9t9jt9g3/

 

Espero que se trate disso. Vou querer saber mais sobre!

[rikaschmitt 54]

Isso, é mais ou menos assim.

Obrigatoriamente ter que ter 3 colunas.. e a div de cada conteúdo terá uma altura diferente, então elas vão se encaixando automaticamente pelas colunas...

 

No seu exemplo, todas as divs tem uma altura igual, mesmo que o texto fique com um espaço branco.... no meu caso isso não pode acontecer. As divs vão se encaixando, independente da altura.. estilo "mosaico".

[WictorP 9]

Porque não usa o simples float? ...

<div id="pai" style="width:"150px;">
 <div id="esquerda" style="width:50px;float:left">
 </div>
 <div id="centro" style="width:50px;float:left">
 </div>
 <div id="direita" style="width:50px;float:left">
 </div>
 <div style="clear:both;"></div>
</div>

Acho que funcionaria bem ...

[rikaschmitt 54]

Poisé. Eu até tinha tentado como primeira opção, mas ficou estranho.. vou tentar novamente.

Valeu.

[WictorP 9]

Mas oque ficou estranho?

[rikaschmitt 54]

É que na primeira vez que eu utilizei os floats, as divs se orientavam pela maior altura da linha. Ou seja, na primeira linha com as 3 divs, a com a maior altura, limitava o começo da proxima linha de divs.. dai algumas ficavam com espaços em brancos...

[WictorP 9]

Eu fiz um exemplo meio besta aqui só pra te mostrar.

 

Se as divs vier depois da div conteudo é normal ficar o espaço em branco..

Mas espaços brancos nem sempre são ruins, não cansa os olhos...

 

 

http://jsfiddle.net/1j10dxde/

[rikaschmitt 54]

Eu fiz um exemplo meio besta aqui só pra te mostrar.

 

Se as divs vier depois da div conteudo é normal ficar o espaço em branco..

Mas espaços brancos nem sempre são ruins, não cansa os olhos...

 

 

http://jsfiddle.net/1j10dxde/

 

O problema é que preciso seguir o que o designer desenhou no layout.. e precisa se encaixar, sem espaços em branco.. se eu não fizer como está no layout, dai já viu né...

[WictorP 9]

Hmm.

Tipo, acho que mesmo com JS/JQ, ia dar no mesmo, quer me adc no face pra ver se entendo melhor sua dúvida?

Está na assinatura o meu facebook.

[rikaschmitt 54]

Vou esperar um pouco pra dar continuidade a resolução deste problema. Alterei a forma para 2 colunas apenas.. dai vou aguardar a nota final do designer para ver se ele aprova ficar 2 colunas e não 3. Provavelmente vai reclamar.. mas.. vou esperar mais um pouco. Qualquer coisa eu retorno.

 

Valeu Wictor :D

[rikaschmitt 54]

Então.. tentei usar float e não fica como eu quero.

As divs estão se alinhando pela altura máxima da linha...

 

Está ficando asism:

 

 

Precisa ficar assim:

 

 

não sei mais o que fazer :(

 

----------------------------------

----------------------------------

Bem, não consegui esse efeito puramente com CSS, então resolvi usar um plugin jQuery.

Funcionou perfeitamente.

 

http://isotope.metafizzy.co/layout-modes/masonry.html

[carlosmadeiracunha 3]

Então.. tentei usar float e não fica como eu quero.

As divs estão se alinhando pela altura máxima da linha...

 

Está ficando asism:

 

 

Precisa ficar assim:

 

 

não sei mais o que fazer :(

 

----------------------------------

----------------------------------

 

Bem, não consegui esse efeito puramente com CSS, então resolvi usar um plugin jQuery.

Funcionou perfeitamente.

 

http://isotope.metafizzy.co/layout-modes/masonry.html

 

Olha só, eu dei uma olhada neste link que você postou aí e tentei usar os códigos, alterei para height: auto no css do código mas os blocos não se ajustam não, eles continuam da mesma forma de quando usamos o css puro com o float. Se deixar o height fixo, aí o conteúdo vaza do div. Maquinei bati cabeça e não consegui mesmo, tem como você colocar o seu código aqui pra eu ver como ficou? Não sei aonde estou errando. Olha o meu código alterado abaixo.

 

<style type="text/css">
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


/* ---- grid ---- */

.grid {
  background: #DDD;
  max-width: 60%;
  margin: 0 auto;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 310px;
  height: auto;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.grid-item--height2 { height: auto; }

</style>
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
<script type="text/javascript">
// external js: isotope.pkgd.js
$(document).ready( function() {
  
  $('.grid').isotope({
    itemSelector: '.grid-item',
    masonry: {
      columnWidth: 310,
      isFitWidth: true
    }
  });
  
});

</script>

testei várias formas mas sempre continua dando aquele "erro" do div acompanhar a linha do maior div.

 

Se coloco a mesma classe em todos os divs, ocorre o erro, mas se coloco igual ao modelo do link aí sim eles se agrupam, mas pra mim eles têm que necessariamente ter a mesma classe porque os divs vão ser duplicados e com conteúdo vindo dinamicamente do banco de dados.

Se puder ajudar agradeceria muito.

 

Até.

[carlosmadeiracunha 3]

Aí, pesquisando bastante aqui pela internet achei um código que serviu perfeitamente para o meu propósito.

 

<style>
/*CSS*/

#box_post{
float:left;
width:75%;
height:auto;
border-right:1px dotted #FF8400;
margin:5px;
}

#box_post .box_post_chamada{
float:left;
min-width:310px;
width:31%;
height:auto;
padding:5px 10px;
border-bottom:1px dotted #A2A2A2;
}
	#box_post .box_post_chamada:hover{
	background:#DBDADA;
	}

</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/masonry.js"></script>
<script>
	$(function(){
 
    var $container = $('#box_post');
   
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.box_post_chamada'
      });
    });
   
  });
</script>


html

<div id="box_post">

<div class="box_post_chamada">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo odio, ultrices sed accumsan sit amet, suscipit rutrum est. Sed dictum porta diam in dapibus. Aliquam elementum quam ut tortor vestibulum varius. Quisque id imperdiet nulla. Phasellus eu quam id elit egestas sollicitudin et vitae mauris. Nulla et semper diam. Aenean ac orci sit amet est ultricies aliquet quis eu eros. Suspendisse vulputate tincidunt magna in vestibulum. Maecenas id nulla felis. Maecenas ut venenatis nulla.
</div>

<div class="box_post_chamada">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo odio, ultrices sed accumsan sit amet, suscipit rutrum est. Sed dictum porta diam in dapibus. Aliquam elementum quam ut tortor vestibulum varius. Quisque id imperdiet nulla. Phasellus eu quam id elit egestas sollicitudin et vitae mauris. Nulla et semper diam. Aenean ac orci sit amet est ultricies aliquet quis eu eros. Suspendisse vulputate tincidunt magna in vestibulum. Maecenas id nulla felis. Maecenas ut venenatis nulla.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo odio, ultrices sed accumsan sit amet, suscipit rutrum est. Sed dictum porta diam in dapibus. Aliquam elementum quam ut tortor vestibulum varius. Quisque id imperdiet nulla. Phasellus eu quam id elit egestas sollicitudin et vitae mauris. Nulla et semper diam. Aenean ac orci sit amet est ultricies aliquet quis eu eros. Suspendisse vulputate tincidunt magna in vestibulum. Maecenas id nulla felis. Maecenas ut venenatis nulla.</p>

<p>Sed non faucibus ante, vitae porta dui. Nam in urna ex. Quisque a pretium mauris, vitae imperdiet lectus. Mauris maximus rutrum quam vel ultrices. Aenean non sapien vel ipsum fringilla convallis a quis nibh. Morbi sed libero nulla. Quisque feugiat bibendum maximus. Etiam fermentum orci vitae tortor iaculis ultrices.</p>
</div>	


<div class="box_post_chamada">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo odio, ultrices sed accumsan sit amet, suscipit rutrum est. Sed dictum porta diam in dapibus. Aliquam elementum quam ut tortor vestibulum varius. Quisque id imperdiet nulla. Phasellus eu quam id elit egestas sollicitudin et vitae mauris. Nulla et semper diam. Aenean ac orci sit amet est ultricies aliquet quis eu eros. Suspendisse vulputate tincidunt magna in vestibulum. Maecenas id nulla felis. Maecenas ut venenatis nulla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo odio, ultrices sed accumsan sit amet, suscipit rutrum est. Sed dictum porta diam in dapibus. Aliquam elementum quam ut tortor vestibulum varius. Quisque id imperdiet nulla. Phasellus eu quam id elit egestas sollicitudin et vitae mauris. Nulla et semper diam. Aenean ac orci sit amet est ultricies aliquet quis eu eros. Suspendisse vulputate tincidunt magna in vestibulum. Maecenas id nulla felis. Maecenas ut venenatis nulla.</p>

<p>Sed non faucibus ante, vitae porta dui. Nam in urna ex. Quisque a pretium mauris, vitae imperdiet lectus. Mauris maximus rutrum quam vel ultrices. Aenean non sapien vel ipsum fringilla convallis a quis nibh. Morbi sed libero nulla. Quisque feugiat bibendum maximus. Etiam fermentum orci vitae tortor iaculis ultrices.</p>
</div>


<div class="box_post_chamada">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo odio, ultrices sed accumsan sit amet, suscipit rutrum est. Sed dictum porta diam in dapibus. Aliquam elementum quam ut.</p>
</div>

Funcionou perfeitamente, não tenho como explicar porque não sou entendido em jquery ou javascript, mas esta aí, quem quiser comentar por favor, fique a vontade.