auto height dla każdej komórki w tabelce Opcje

[mb83]

Witam,
Czy da się uzyskać dynamiczny height dla każdej komórki w tabeli?
Chodzi o taki efekt:
Tabelka to dwie kolumny, przy czym każda komórka to inny height w zależności od ilości tekstu w niej.

Tutaj jest próbka jak ma wyglądać ale chodzi o to aby "komórka 2" i "komórka 3" były takiej wysokości jak tekst a nie dostosowały się do wysokości komórek 1 i 4.
http://jsfiddle.net/pem579vq/

Da się to jakoś ogarnąć?


Pewnie rozwiązanie jest błahe, upały dają się we znaki i brak myślenia w CSS:-)

[trueblue]

Może tak:
http://jsfiddle.net/pem579vq/1/

[mb83]

super, a czy da się aby komórka 4 była zaraz pod drugą? Bez tego paddingu.

ogólnie chodzi o to aby każda kolejna była z różnym height (tak jak teraz) i w równym odstępie pomiędzy sobą.

[trueblue]

Czyli tak:
http://jsfiddle.net/gabrieleromanato/tQANc/
Szukaj w Google pod hasłem: masonry

[mb83]

dokładnie.
a da się to jakoś w wersji na tabelki przerobić? albo jest już coś takiego ale w table?

[trueblue]

Nie, tabelka to tabelka.

[mb83]

jeszcze jedno w temacie.
masonry układa w formacie:

[HTML] pobierz, plaintext 
tab1  tab5
tab2  tab6
tab3  tab7
tab4  ...
[HTML] pobierz, plaintext 

da się żeby układał tak:

[HTML] pobierz, plaintext 
tab1  tab2
tab3  tab4
tab5  tab6
tab7  ...
[HTML] pobierz, plaintext 

(IMG:style_emoticons/default/questionmark.gif)

ponawiam post.
aktualnie kod, który mi w zupełności odpowiada to coś takiego:

[HTML] pobierz, plaintext 
.wrapper {
    width: 100%;
    margin: 1em auto;
}
 
.masonry {
    padding: 0;
    -moz-column-gap: 5px;
    -webkit-column-gap: 5px;
    column-gap: 5px;
    line-height: 18px;
}
 
.item {
    display: inline-block;
    background: #fff;
    padding: 5px;
    margin: 1px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #3b5998; 
}
.item:hover {
    background-color: #ffc;
    cursor: pointer;
} 
 
 
.masonry div.e {
display: block;}
 
@media only screen and (min-width: 690px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
[HTML] pobierz, plaintext 

tylko czy jest możliwość aby item'y układały się od lewej do prawej a nie od góry do doły (tak jak post wyżej)?
Pomoże ktoś?

[trueblue]

http://stackoverflow.com/a/20312727

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (właściwość order).