
HTML, CSS, float (?)
Witam,
Czy istnieje możliwość umieszczenia dajmy na to 6 elementów o tej samej szerokości ale różnej wysokości (wszystkie muszą korzystać z tej samej klasy css) jak na rysunku obok. Próbowałem np. float:right; ale powstają przerwy między górnym a dolnym rzędem, a inline-block wyrównuje do najwyższego. Jedna klasa css, bo elementy umieszczane są na stronie, nazwijmy to w pętli.
Pozdrawiam
Chodzi właśnie o to, że nie mogę za bardzo tak zrobić, bo mam tylko w jednym miejscu na stronie, tak jak pisałem - odwołanie do elementu frameworka, który wstawia 6 takich komponentów - czyli powiedzmy 6 divów obok siebie.
Próbuje to zrobić tylko w cssie, ale jak się nie uda, to będę musiał zmodyfikować kod, który generuje te elementy...
W takim razie wg mnie nie da się tego zrobić (mogę się mylić - niech mnie ktoś poprawi). Ew. kombinowanie z display: none; na divach, odłączeniem ich od DOMu na document.ready() i dodaniu do odpowiednich kolumn - ale to trochę taki overkill :)
Taka banalna rzecz, ale nie zrobisz tego :)
Możesz uzyskać coś podobnego: http://stackoverflow.com/questions/9561548/float-divs-treat-like-rows
A to o co prosisz to wyłącznie javascript :)
jak już jestem w temacie css... :-) inne wyjście: elementy z pierwszego posta (rysunek) powinny pojawiać się w jednym rzędzie - jak zrobić, żeby strona poszerzała się automatycznie (pasek przewijania na dole) w zależności od liczby elementów.
Na pewno łatwo byłoby to zrobić za pomocą jquery, czy javascriptu, dodajesz szerokości poszczególnych elementów, potem wrzucasz je do jednego kontenera i ustawiasz mu obliczoną szerokość. Sprawdź jeszcze http://www.w3schools.com/cssref/pr_text_white-space.asp oraz umieszczanie elementów bezpośrednio po sobie (bez żadnych spacji pomiędzy </div><div>)
Można dodać jeszcze do divów display:inline-block, gdyby nie chciały się umieszczać obok siebie :)
dziękuję maviozo, zadziałało jak trzeba white-space:nowrap;