Dzień dobry!
Próbuję sformatować stronę w dwóch kolumnach. Przepływ elementów ma być taki, że
najpierw div-y układają się jeden pod drugim w jednej kolumnie, a po jej wypełnieniu
- w drugiej.
To jest proste, osiąga się to przez taki wrapper:
#wrapper-two-column {
column-count:2;
-moz-column-count:2; /* zapis dla przeglądarki Firefox */
-webkit-column-count:2; /* zapis dla przeglądarki Google Chrome, Safari,
Opera 15+ */
}

I teraz układam sobie w tym wrapperze div-y:
<div id="wrapper-two-column">
<div class="in-two-column">bla bla bla 1 ... </div>
<div class="in-two-column">bla bla bla 2 ... </div>
<div class="in-two-column">bla bla bla 3 ... </div>
<div class="in-two-column">bla bla bla 4 ... </div>
<div class="in-two-column">bla bla bla 5 ... </div>
...
</div>

I w Firefoksie wygląda to tak jak chcę, a w chromie jeden z divów jest "przełamany"
między te dwie kolumny. Jak wymusić na chromie, żeby nie "łamał" diva klasy
in-two-column?

Serdecznie pozdrawiam

Michał Jędryka

do góry

W dniu 2014-02-18 15:09, m...@g...com pisze:
> #wrapper-two-column {
> column-count:2;
> -moz-column-count:2; /* zapis dla przeglądarki Firefox */
> -webkit-column-count:2; /* zapis dla przeglądarki Google Chrome, Safari,
Opera 15+ */
> }
>
> I teraz układam sobie w tym wrapperze div-y:
> <div id="wrapper-two-column">
> <div class="in-two-column">bla bla bla 1 ... </div>
> <div class="in-two-column">bla bla bla 2 ... </div>
> <div class="in-two-column">bla bla bla 3 ... </div>
> <div class="in-two-column">bla bla bla 4 ... </div>
> <div class="in-two-column">bla bla bla 5 ... </div>
> ...
> </div>
>
> I w Firefoksie wygląda to tak jak chcę, a w chromie jeden z divów jest
> "przełamany" między te dwie kolumny. Jak wymusić na chromie, żeby nie "łamał" diva
klasy in-two-column?

Spróbuj tego:
http://www.w3.org/TR/css3-multicol/#break-before-bre
ak-after-break-inside
aczkolwiek nie wiem czy to w ogóle gdziekolwiek działa.


--
Pozdrawiam,
Paweł "PablO" Piskorz

do góry