HTML, CSS, float (?)

Forum Komputery
Odpowiedz
22.03.2012 17:45
1
odpowiedz
zanonimizowany50279
120
Konsul
Image

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

22.03.2012 17:49
Katane
2
odpowiedz
Katane
170
Useful_Idiot_

Musisz zrobic 3 kolumny (na float lub inline-block) w nie wrzucic divy z.

22.03.2012 18:02
3
odpowiedz
zanonimizowany50279
120
Konsul

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...

22.03.2012 18:05
Katane
4
odpowiedz
Katane
170
Useful_Idiot_

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 :)

22.03.2012 18:16
5
odpowiedz
zanonimizowany302122
19
Pretorianin

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 :)

23.03.2012 10:33
6
odpowiedz
zanonimizowany50279
120
Konsul

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.

23.03.2012 11:35
maviozo
7
odpowiedz
maviozo
243
autor zdjęć

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 :)

23.03.2012 11:53
8
odpowiedz
zanonimizowany50279
120
Konsul

dziękuję maviozo, zadziałało jak trzeba white-space:nowrap;

Forum Forum Komputery
Odpowiedz

GRYOnline.pl:

Facebook GRYOnline.pl Instagram GRYOnline.pl X GRYOnline.pl Discord GRYOnline.pl TikTok GRYOnline.pl Podcast GRYOnline.pl WhatsApp GRYOnline.pl LinkedIn GRYOnline.pl Forum GRYOnline.pl

tvgry.pl:

YouTube tvgry.pl TikTok tvgry.pl Instagram tvgry.pl Discord tvgry.pl Facebook tvgry.pl