+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] dwie kolumny w kontenerze (/thread-css-dwie-kolumny-w-kontenerze)
[CSS] dwie kolumny w kontenerze - w0x - 21-10-2009
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.
RE: [CSS] dwie kolumny w kontenerze - Labsta.com - 21-10-2009
W realnym projekcie też będziesz mieć wszystko na float:left; ? Boksy będą przeskakiwać?
RE: [CSS] dwie kolumny w kontenerze - w0x - 21-10-2009
(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?
RE: [CSS] dwie kolumny w kontenerze - Labsta.com - 21-10-2009
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
RE: [CSS] dwie kolumny w kontenerze - w0x - 21-10-2009
(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.
RE: [CSS] dwie kolumny w kontenerze - Labsta.com - 21-10-2009
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
RE: [CSS] dwie kolumny w kontenerze - w0x - 21-10-2009
(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.
RE: [CSS] dwie kolumny w kontenerze - Labsta.com - 21-10-2009
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ć
RE: [CSS] dwie kolumny w kontenerze - sunpietro - 21-10-2009
RE: [CSS] dwie kolumny w kontenerze - w0x - 21-10-2009
(21-10-2009, 02:50)Labsta.com napisał(a): UFFFF
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
Widze ze bede jednak musial uzyc dwoch zagniezdzonych kontenerow..
Dzieki za pomoc, a jakby ktos mial pomysl na sposob z jednym konterenerem to zapraszam.