Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
układ divów jak tekst w gazecie - jak uzyskać?
#1
Question 
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]

Niestety przy zastosowaniu standardowego float:left; osiągam taki efekt:

[Obrazek: 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ą pomocSmile
Odpowiedz
#2
Poczytaj o "clear"
Odpowiedz
#3
Zrób div lewi i prawy z float left, następnie do diva left wrzucasz zielony i żółty a do prawego czerwony.
Odpowiedz
#4
(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?



Odpowiedz
#5
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ść.
Odpowiedz
#6
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.
Odpowiedz
#7
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".

Odpowiedz
#8
http://www.webappers.com/2011/12/29/15-g...y-masonry/
Odpowiedz


Podobne wątki
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Hiperłącza do divów (automatyczna zmiana pozycji menu) Heyek 5 1,754 23-02-2013, 16:22
Ostatni post: kornell
  Dziwny tekst. Intelactive 2 1,394 28-11-2012, 23:43
Ostatni post: Intelactive
  "Podzielenie" divów heavy1123 3 1,610 01-10-2012, 03:32
Ostatni post: camelrafal
  [css] nie potrafie ustawic 2 divow obok siebie grzesiek77 11 3,728 22-05-2012, 22:58
Ostatni post: Moody
  [CSS]Tekst i obrazek na tle nieznasz 1 1,350 24-03-2012, 18:22
Ostatni post: TastemanPL

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele