Zaloguj się

w0x · (Ten post był ostatnio modyfikowany: 21-10-2009, 00:09 przez w0x.)

Witam,

mam kontener o ustalonej szerokosci, nastepnie wrzucam do niego elementy (div) z float: left, o szerokosci rowniej polowie szerokosci kontenera.
Mam efekt taki, ze w dwoch kolumnach w kontenerze mam zagniezdzone elementy. Problem jednak jest taki, ze poniewaz elementy maja rozny kontent - sa roznej wysokosci, to wysokosc kazdego wiersza w kontenerze jest ustalana na taka, jaka ma najwiekszy element w poszczegolnym wierszu. Dlatego w kolumnach powstaja pionowe "biale pola", ktorych chcialbym uniknac.
Moje pytanie brzmi jak sie z tym uporac?

Takto wyglada w tej chwili (html wydziergany na szybko):
http://toper.rootnode.net/test/kolumna.html

Z gory dzieki za podpowiedz.

**Labsta.com** · 21-10-2009, 00:18

W realnym projekcie też będziesz mieć wszystko na float:left; ? Boksy będą przeskakiwać?

w0x · 21-10-2009, 00:35

(21-10-2009, 00:18)Labsta.com napisał(a): W realnym projekcie też będziesz mieć wszystko na float:left; ? Boksy będą przeskakiwać?

float: left to nie jest wymog - generalnie chce w divie ukladac elementy w dwoch kolumnach.. Jak to w takim razie zrobic lepiej i zeby dzialalo tak jak opisalem?

**Labsta.com** · 21-10-2009, 01:00

Powiedz mi jeszcze coś.
Elementy mają iść :
1 2
3 4
I co ma się stać z tymi dziurami? Ma tam wskoczyć kolejny element? Czy żółte ma być równej wysokości?

Może podziel na dwie kolumny lewa: 1 i 3, a do prawej wrzuć 2 i 4

w0x · 21-10-2009, 01:39

(21-10-2009, 01:00)Labsta.com napisał(a): Powiedz mi jeszcze coś.
Elementy mają iść :
1 2
3 4
I co ma się stać z tymi dziurami? Ma tam wskoczyć kolejny element? Czy żółte ma być równej wysokości?

Może podziel na dwie kolumny lewa: 1 i 3, a do prawej wrzuć 2 i 4

Kolejnosc elementow powinna byc zachowana 1, 2, 3, 4 - z uwagi na sortowanie elementow.
Zolte pole (element) zwykle nie bedzie byc tej samej wysokosci (i stad te biale pola). Jesli wpada kolejny element, to powinien byc w pionie besposrednio nad tym powyzej w kolumnie.

Myslalem wlasnie o tym, aby podzielic contener na dwa zagniezdzone. Tutaj chodzi mi o bardziej ogolne rozwiazanie, jesli woogle jest takie mozliwe.

**Labsta.com** · (Ten post był ostatnio modyfikowany: 21-10-2009, 02:09 przez Labsta.com.)

Trudno mi to sobie teoretycznie wyobrazić, bo zawsze zrobi się bałagan np:

Kod:
<html>

<head>

<title>biale pola w kolumnach</title>

<style type="text/css">

.c { 

width: 80%;

background-color: silver;

}

.e { 

float: left; 

width: 50%; 

background-color: yellow; 

margin-bottom: 1em; 

border-bottom: solid 1px red;

}

.f { 

float: right; 

width: 50%; 

background-color: yellow; 

margin-bottom: 1em; 

border-bottom: solid 1px red;

}

</style>

</head>

<body>

<h3>DWIE KOLUMY W KONTENERZE</h3>

<div class="c">

    <div class="e">

        element1<br>b<br>c

    </div>

    <div class="f">

        element2<br>a<br>a<br>a<br>a<br>a<br>a

    </div>

    <div class="e">

        element3<br>b

    </div>

    <div class="f">

        element4

    </div>

    <div class="e">

        element5<br>b<br>c<br>d<br>e

    </div>

        <div class="f">

        element6<br>b<br>c

    </div>

</div>

</body>

</html>

Oczywiście to źle działa, chodzi mi o to żebyś zobaczył jak się ustawiły elementy:
1 2
3 2
4 2
5 6

Zwykle elemanty w rózwnych kolumnach ustawi się +/- tak jak masz u siebie (z tą przerwą) przykład u dołu mojego bloga: http://websta.pl/
1 2
3 4

Z kolei na jednej z moich podstron mam 2 kolumny http://labsta.com/uslugi/zamow-strone-www.html ale w układzie
1 4
2 5
3

Więc ogólnie mamy problem, bo jeśli dobrze cię rozumiem to zrobi się bałagan.
Osobiści zastosowałbym układ dwóch kolumn i kolejność
1 2
3 4

Czyli niezależnie od wysokości co drugi element do prawej kolumny. Przy takiej opcji może wyjść np. coś takiego:
1 2
3 2
5 2
7 4
7 6
7

Jeśli dobrze Cię rozumiem to nie przychodzi mi nic innego do głowy. Kolejnośc w kodzie wygląda prosto jednak cięzko mi sobie wyobrazić kolejność, o którą Ci chodzi wizualnie.

EDIT:
Może jakiś realny (praktyczne użycie) by mi to rozjaśniło, bo wyobraźni mi nie starcza Smile

w0x · 21-10-2009, 02:27

(21-10-2009, 02:04)Labsta.com napisał(a): EDIT:
Może jakiś realny (praktyczne użycie) by mi to rozjaśniło, bo wyobraźni mi nie starcza

Oki, w takim razie realny przyklad:
http://poland-art.com/

Pierwsza strona - jakies wystawy. W tej chwili jak obejrzysz kod to jest masakra - dwie kolumny z artykulami sa w postaci tabel, ale uklad jest taki jaki chcialbym miec docelowo, ale w divie i to najlepiej w jednym, jesli to oczywiscie mozliwe.

**Labsta.com** · (Ten post był ostatnio modyfikowany: 21-10-2009, 02:54 przez Labsta.com.)

UFFFF

Zanim dotarłem do treści otwarłem chyba z 30 wrapperów Big Grin

No tam jest układ 2 kolumnowy na zasadzie:
1 5
2 6
3 7
4 8
Nazwijmy go "gazetowym", czyli inny niż chiałeś. Dokładnie w taki sposób zrobione jak na http://labsta.com/uslugi/zamow-strone-www.html

W przypadku stron www jest to dość nietypowe. Czytamy newsy od lewej do prawej i potem w dół. W gazetach jest to często stosowane, bo jest większa niż ekran i nie trzeba przewijać Smile

sunpietro · 21-10-2009, 02:53

w0x · 21-10-2009, 03:37

(21-10-2009, 02:50)Labsta.com napisał(a): UFFFF Zanim dotarłem do treści otwarłem chyba z 30 wrapperów

No tam jest układ 2 kolumnowy na zasadzie:
1 5
2 6
3 7
4 8
Nazwijmy go "gazetowym", czyli inny niż chiałeś. Dokładnie w taki sposób zrobione jak na http://labsta.com/uslugi/zamow-strone-www.html

W przypadku stron www jest to dość nietypowe. Czytamy newsy od lewej do prawej i potem w dół. W gazetach jest to często stosowane, bo jest większa niż ekran i nie trzeba przewijać

Tak, masz racje - to nie jest wizualnie "posortowane" tak jak chcialem, ale umiejscowienie elementow w kolumnach wyglada dokladnie tak jak mialem na mysli Smile

Widze ze bede jednak musial uzyc dwoch zagniezdzonych kontenerow..

Dzieki za pomoc, a jakby ktos mial pomysl na sposob z jednym konterenerem to zapraszam.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie