układanie div w rzędach... Opcje

[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. (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[lenczewski]

nadaj wszystkim float:left, a nie tylko tym w środku (kontener tez musi byc float:left)

[HTML] pobierz, plaintext 
<style>
    .a {width:600px;float:left}
    .b {width:200px;float:left}
</style>
<div class=a>
    <div class=b>tutaj obrazek a pod obrazkiem jedno słowo</div>
    <div class=b>tutaj obrazek a pod obrazkiem jedno słowo</div>
    <div class=b>tutaj obrazek a pod obrazkiem jedno słowo</div>
    <div class=b>tutaj obrazek a pod obrazkiem jedno słowo</div>
    <div class=b>tutaj obrazek a pod obrazkiem jedno słowo</div>
    <div class=b>tutaj obrazek a pod obrazkiem jedno słowo</div>
    <div class=b>tutaj obrazek a pod obrazkiem jedno słowo</div>
    <div class=b>tutaj obrazek a pod obrazkiem jedno słowo</div>
    <div class=b>tutaj obrazek a pod obrazkiem jedno słowo</div>
    <div class=b>tutaj obrazek a pod obrazkiem jedno słowo</div>
</div>
[HTML] pobierz, plaintext 

[JoShiMa]

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. (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

A Ty się z choinki urwałeś? Kto tu mówił o klasach?

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.

Ten post edytował Kreton 25.07.2008, 21:34:21

[JoShiMa]

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

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]

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.

Ten post edytował JoShiMa 28.07.2008, 10:46:16

[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]

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]

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]

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:

[HTML] pobierz, plaintext 
div > div+ div+ div + div
{
    clear: left;
}
[HTML] pobierz, plaintext 

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