+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: układ divów jak tekst w gazecie - jak uzyskać? (/thread-uklad-divow-jak-tekst-w-gazecie-jak-uzyskac)
układ divów jak tekst w gazecie - jak uzyskać? - Ace - 02-01-2012
Witam,
Chciałbym ułożyć taki zestaw divów:
Kod:
<div id="zielony"></div>
<div id="czerwony"></div>
<div id="zolty"></div>w sposób taki jak na obrazku:
![[Obrazek: boxy_ok.png]](http://blooming-soft.pl/boxy_ok.png)
Niestety przy zastosowaniu standardowego float:left; osiągam taki efekt:
![[Obrazek: boxy_zle.png]](http://blooming-soft.pl/boxy_zle.png)
Zdaję sobie sprawę, że dodając dodatkowe divy reprezentujące kolumny mogę uzyskać pożądany wygląd, ale wtedy pisząc kod html będę musiał decydować w której kolumnie dany box powinien się znaleźć, a na to nie mogę sobie pozwolić. Chciałbym, aby po prostu każdy box spływał nie tylko w lewo, ale i do góry. Wszystkie divy mają taką samą szerokość, ale różne (nieznane na etapie generowania htmla) wysokości. Czy ktoś ma pomysł jak osiągnąć to o czym piszę za pomocą css (w ostateczności java script/jquery)? Z góry dziękuję za wszelką pomoc
RE: układ divów jak tekst w gazecie - jak uzyskać? - szym - 02-01-2012
Poczytaj o "clear"
RE: układ divów jak tekst w gazecie - jak uzyskać? - mateo - 02-01-2012
Zrób div lewi i prawy z float left, następnie do diva left wrzucasz zielony i żółty a do prawego czerwony.
RE: układ divów jak tekst w gazecie - jak uzyskać? - Ace - 02-01-2012
(02-01-2012, 03:03)mateo napisał(a): Zrób div lewi i prawy z float left, następnie do diva left wrzucasz zielony i żółty a do prawego czerwony.
W swoim poście zaznaczyłem, że zdaję sobie sprawę z istnienia takiego rozwiązania, ale nie mogę go zastosować.
(02-01-2012, 01:17)Ace napisał(a): Zdaję sobie sprawę, że dodając dodatkowe divy reprezentujące kolumny mogę uzyskać pożądany wygląd, ale wtedy pisząc kod html będę musiał decydować w której kolumnie dany box powinien się znaleźć, a na to nie mogę sobie pozwolić.
W boxach o których wspominam będą prezentowane aktualności. Moduł, który nimi zarządza nie odpowiada za ich prezentację - ma jedynie wypisać ich listę, a wyglądem niech zajmie się css.
(02-01-2012, 02:48)szym napisał(a): Poczytaj o "clear"
Wydaje mi się, że potrafię poprawnie stosować właściwość clear, ale nie widzę w jaki sposób miałaby pomóc mi rozwiązać problem. Możesz napisać coś więcej?
RE: układ divów jak tekst w gazecie - jak uzyskać? - szym - 02-01-2012
http://kurs.browsehappy.pl/CSS/Float przeczytaj sobie tego linka.
ustaw clear:right dla float:right itp.
daj linka do strony albo wklej kod http://jsfiddle.net/ jak masz możliwość.
RE: układ divów jak tekst w gazecie - jak uzyskać? - Ace - 02-01-2012
Chodzi o tę stronę http://obronca.com.pl/ i aktualności znajdujące się w jej prawym dolnym rogu. Widać, że pomiędzy aktualnością z datą 13.12.2011 i tą z datą 06.02.2010 powstał odstęp wynikający z długości aktualności 01.02.2011 i temu chcę zapobiec.
RE: układ divów jak tekst w gazecie - jak uzyskać? - Engine - 02-01-2012
A nie sądzisz, że taki układ kolejności artykułów jest zły. Z przyzwyczajenia czytam od góry do dołu i przechodzę do następnej kolumny w które jest zapewne ciąg dalszy.
---
Spróbuj artykułom dać float left, ale co drugiemu dać float right.
---
Widzę, że treść aktualności jest prezentowana na osobnych podstronach, to nie lepiej na stronie głównej dać tylko fragment artykułu i ucinać go po np. 200 znakach i dać "czytaj dalej".
RE: układ divów jak tekst w gazecie - jak uzyskać? - Kartofelek - 02-01-2012
http://www.webappers.com/2011/12/29/15-great-examples-of-websites-using-jquery-masonry/