Kolumny jak na facebooku, czemu nie działa ? Opcje

[Gligamesh]

Przykładowy kod

Kod

<style type="text/css" media="screen">
div {
border: 1px solid red;
width: 45%;
height: auto;
}

.left {
    float: left;
    clear: left;

}

.right {
    float: right;
    clear: right;
}

</style>
<?php

$c = array('111<br>1111111 <br>1111','222 222 <br>22','4444 444<br>44<br>4444 <br>44 ');

for ($index = 0; $index < 20; $index++) {
        echo '<div class="'.($index%2 === 0 ? 'left':'right').'">'.$c[$index%3].'</div>';
}

Ma ktoś może pomysł czemu to nie działa ? Czemu wszystkie kontenery się ładnie układają prócz dwóch pierwszych które usilnie dostosowują się do sąsiada z boku?

Ten post edytował Gligamesh 26.08.2013, 00:34:51

[fate]

bo każdy div ma

[HTML] pobierz, plaintext 
height: auto
[HTML] pobierz, plaintext 

[Gligamesh]

obecność height:auto czy jego brak to żadna różnica.

[fate]

Nie jest to rozwiązanie ale zauważyłem iż jeżeli kontent 1 kolumny dociagnietej do lewej jest niższy niz tej 1 do prawej to jest już OK.

http://jsfiddle.net/JfabN/

[Gligamesh]

no ale tego nie jesteś w stanie ustawić na sztywno. W dodaku czemu psują się tylko pierwsze a nie wszystkie ?

to jest tak proste że aż głupie...

Ten post edytował Gligamesh 26.08.2013, 11:35:39

[fate]

Wszystkie się "psują" w zależności od ilosci kontentu:

http://jsfiddle.net/7bKDu/

Moze to Cie zainteresuje:

http://isotope.metafizzy.co/index.html
http://masonry.desandro.com/

[Gligamesh]

o dziwo w starym IE chodzi bez problemu....

znam te fajerwerki ale nie o to chodzi.

Kod

  
$("div.right").each(function() {
    var $el =$(this);
    var $parent = $(this).prevAll('.right');
    var offset = 0;
    if($parent.height() > 0) {
    offset = parseFloat($el.offset().top - ($parent.outerHeight()+$parent.offset().top)-parseFloat($el.css('marginBottom')));
    if(offset > 0)
    $el.css('margin-top','-'+offset+'px');
    }
});

jedyne co mi przyszło do głowy...

Ten post edytował Gligamesh 26.08.2013, 16:25:35