Pomoc - Szukaj - U¿ytkownicy - Kalendarz
Pe³na wersja: uk³adanie div w rzêdach...
Forum PHP.pl > Forum > Po stronie przegl±darki > HTML \ XHTML
acztery
Witam,

Mam taki k³opot drobny

mam DIV gdzie width:np 600px

w nim mam kilka innych div np:

<div style="width:600px">
<div style="width:200px">tutaj obrazek a pod obrazkiem jedno s³owo</div>
<div style="width:200px">tutaj obrazek a pod obrazkiem jedno s³owo</div>
<div style="width:200px">tutaj obrazek a pod obrazkiem jedno s³owo</div>
<div style="width:200px">tutaj obrazek a pod obrazkiem jedno s³owo</div>
<div style="width:200px">tutaj obrazek a pod obrazkiem jedno s³owo</div>
<div style="width:200px">tutaj obrazek a pod obrazkiem jedno s³owo</div>
<div style="width:200px">tutaj obrazek a pod obrazkiem jedno s³owo</div>
<div style="width:200px">tutaj obrazek a pod obrazkiem jedno s³owo</div>
<div style="width:200px">tutaj obrazek a pod obrazkiem jedno s³owo</div>
<div style="width:200px">tutaj obrazek a pod obrazkiem jedno s³owo</div>

</div>





Wynikiem chce aby by³o pouk³adane po 3 div na jedn± kolumnê czyli beda obrazki a pod kazdym te moje s³owo chodzi o to aby to siê tak same uk³ada³o...
Shili
daj tym divom w ¶rodku float: left;
JoShiMa
Jak by siê nie chcia³y przesun±æ do drugiego wiersza to czwartemu, siódmemu i dziewi±temu daj clear: both


Ja jednak zrobi³abym to inaczej

zamiast div u¿y³abym ul
ul z trzema li w kazdym li ul z trzema li

Zewnêtrzny ul z uk³adem pionowym wewnêtrzne z uk³adem poziomym.
Kreton
Musz± siê u³o¿yæ po trzy, kontener je obejmuj±cy ma 600px. Dlaczego na dodawaæ klasy? Pomy¶l co by by³o gdyby mia³ 100 albo i wiêcej obrazków. 33 klasy?

BTW: Nie wiem jak chcesz uzyskaæ po 3 na kolumnê skoro masz 10 divów. Chyba, ¿e chodzi Ci o 3 na wiersz. smile.gif
lenczewski
nadaj wszystkim float:left, a nie tylko tym w ¶rodku (kontener tez musi byc float:left)

  1. .a {width:600px;float:left}
  2. .b {width:200px;float:left}
  3. <div class=a>
  4. <div class=b>tutaj obrazek a pod obrazkiem jedno s³owo</div>
  5. <div class=b>tutaj obrazek a pod obrazkiem jedno s³owo</div>
  6. <div class=b>tutaj obrazek a pod obrazkiem jedno s³owo</div>
  7. <div class=b>tutaj obrazek a pod obrazkiem jedno s³owo</div>
  8. <div class=b>tutaj obrazek a pod obrazkiem jedno s³owo</div>
  9. <div class=b>tutaj obrazek a pod obrazkiem jedno s³owo</div>
  10. <div class=b>tutaj obrazek a pod obrazkiem jedno s³owo</div>
  11. <div class=b>tutaj obrazek a pod obrazkiem jedno s³owo</div>
  12. <div class=b>tutaj obrazek a pod obrazkiem jedno s³owo</div>
  13. <div class=b>tutaj obrazek a pod obrazkiem jedno s³owo</div>
  14. </div>
JoShiMa
Cytat(Kreton @ 24.07.2008, 13:11:36 ) *
Musz± siê u³o¿yæ po trzy, kontener je obejmuj±cy ma 600px. Dlaczego na dodawaæ klasy? Pomy¶l co by by³o gdyby mia³ 100 albo i wiêcej obrazków. 33 klasy?

BTW: Nie wiem jak chcesz uzyskaæ po 3 na kolumnê skoro masz 10 divów. Chyba, ¿e chodzi Ci o 3 na wiersz. smile.gif

A Ty siê z choinki urwa³e¶? Kto tu mówi³ o klasach?

Cytat(lenczewski @ 24.07.2008, 13:20:33 ) *
nadaj wszystkim float:left, a nie tylko tym w ¶rodku (kontener tez musi byc float:left)

Wcale nie musi...
Kreton
Więc oświeć mnie i powiedz jak clear:both ma dodać czwartemu, siódmemu i dziwiątemu? Bez użycia klas.
W poście wcześniej chodziło mi dokładnie o użycie 1 klasy 33 razy. A nie o stworzenie 33 klas - niejasno napisałem - mój błąd.
JoShiMa
Cytat(Kreton @ 25.07.2008, 22:32:32 ) *
Wiêc o¶wieæ mnie i powiedz jak clear:both ma dodaæ czwartemu, siódmemu i dziwi±temu? Bez u¿ycia klas.

Bez kombinacji po prostu pêtl±... albo wpisuj±c rêcznie <div style="clear: both">...

Cytat(Kreton @ 25.07.2008, 22:32:32 ) *
W po¶cie wcze¶niej chodzi³o mi dok³adnie o u¿ycie 1 klasy 33 razy. A nie o stworzenie 33 klas - niejasno napisa³em - mój b³±d.

A jak ju¿ tak chcesz, to wystarcz± dwie klasy. a nie 33. My¶lenie nie boli.
Kreton
Wiêc w jaki¶ sposób ma aplikowaæ te style. To jest rozwi±zanie bez sensu. Dlaczego ma dodawaæ jakie¶ ¶mieszne rzeczy do kodu kiedy nie ma takiej potrzeby ?

A czy doda to przez klasê czy wrzuci jako CSS in-line : nie ma najwiekszego znaczenia, bo i jedno i drugie jest bez sensu.
JoShiMa
Cytat(Kreton @ 27.07.2008, 13:44:46 ) *
Dlaczego ma dodawać jakieś śmieszne rzeczy do kodu kiedy nie ma takiej potrzeby ?

A czy doda to przez klasę czy wrzuci jako CSS in-line : nie ma najwiekszego znaczenia, bo i jedno i drugie jest bez sensu.

Taaak? A jeszcze nie pokazałeś jak to zrobić bez klas na razie to tylko się wykłócasz zamiast coś poradzić. Poza tym klasy są po to, żeby ich używać a nie za pomocą przestarzałych atrybutów ustawiać na sztywno szerokość div z którą będzie problem bo w różnych przeglądarkach będzie różnie interpretowana. A na koniec dodam, że zaproponowałam również użycie list.
Kreton
Nie wyk³ucam siê. Wy¿ej napisa³em, ¿e wystarczy samo float: left.

Z zastrze¿eniem, ¿e warta³oby obejmuj±cemu kontrenerowi dodaæ overflow: auto.
JoShiMa
Cytat(Kreton @ 28.07.2008, 18:18:42 ) *
Nie wyk³ucam siê. Wy¿ej napisa³em, ¿e wystarczy samo float: left;


A to s± ju¿ style wiêc nie pitol, ze bez klas czy stylów siê da. Dodatkowo robi siê niepotrzebne gromadzenie pude³ek zupe³nie niesemantyczne. Jak siê kogo¶ uczy to trzeba go uczyæ porz±dnego programowania a nie ³atania na sznurki i druty.
.radex
Cytat(JoShiMa @ 29.07.2008, 09:21:02 ) *
A to s± ju¿ style wiêc nie pitol, ze bez klas czy stylów siê da. Dodatkowo robi siê niepotrzebne gromadzenie pude³ek zupe³nie niesemantyczne. Jak siê kogo¶ uczy to trzeba go uczyæ porz±dnego programowania a nie ³atania na sznurki i druty.


O jakim programowaniu mówisz.... HTML i CSS nie s± jêzykami programowania. To s± jêzyki opisu.
JoShiMa
Cytat(radex_p @ 29.07.2008, 09:54:41 ) *
O jakim programowaniu mówisz.... HTML i CSS nie s± jêzykami programowania. To s± jêzyki opisu.

Dobrze. Mia³am na my¶li kodowanie. Czy to zmienia fakt, ¿e jak siê kogo¶ uczy to trzeba uczyæ dobrze?
leviath
Istnieje w CSS takie cos jak sasiad elementu, np:
  1. div > div+ div+ div + div
  2. {
  3. clear: left;
  4. }
JoShiMa
Jeste¶ pewien, ¿e wszystkie przegl±darki to obs³uguj±? Ja mia³am z tym problemy. Tak samo jak z dzieckiem (nie myliæ z potomkiem)
To jest wersja lo-fi g³ównej zawarto¶ci. Aby zobaczyæ pe³n± wersjê z wiêksz± zawarto¶ci±, obrazkami i formatowaniem proszê kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.