+- 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: 3 divy - height zależy od ilości tekstu (/thread-3-divy-height-zalezy-od-ilo%C5%9Bci-tekstu)
3 divy - height zależy od ilości tekstu - Fibi - 28-08-2009
mam pytanie, jak ustawić, by divy były zależne od siebie?
ma to tak wyglądać:
* złóżmy,że mamy divy 1, 2 i 3.
* mają się wyświetlać koło siebie (tj. 1 2 3)
* w divie 2 nie ma tekstu w ogóle.
* w jednej podstronie, w divie 1 jest tekstu na 3 linijki,a w divie 3 jest 1 linijka tekstu, to wysokość jest jak w divie 1.
* w drugiej podstronie, w divie 3 jest tekstu na 5 linijek,a w divie 1 są 3 linijki tekstu, to wysokość jest jak w divie 3.
* i przy tym, by div 2 się też wyrównywał (tj. height najwyższego (?) diva)
danie height: auto jest ok, ale nie uwzględnia przy tym innych divów. jak dam 100% to jest średnio, bo to jest 100% wysokości okna i trochę kicha. (zależne od rozdziałki)
da się jakoś uwarunkować te 3 divy?
RE: 3 divy - height zależy od ilości tekstu - DoGeR - 28-08-2009
div(auto)
-div1(100%)
-div2(100%)
-div3(100%)
div1,2,3 umieść w divie i ustaw wysokości jak powyżej, powinno zadziałać
RE: 3 divy - height zależy od ilości tekstu - Fibi - 28-08-2009
niezbyt.
żeby zrobić 3 divy koło siebie, trzeba (chyba?) zrobić tak:
php:
<div=1>
<div=1.1></div>
<div=1.2></div>
</div>
<div=2></div>
a w css
#1 { float: left; }
#1.1 { float: left; }
#1.2 { float: right; }
#2 { float: right; }
żeby był koło siebie.
a jak się da tylko
<div=1>
<div=1.1></div>
<div=1.2></div>
<div=1.3></div>
</div>
to nie wyświetlają się koło siebie.
RE: 3 divy - height zależy od ilości tekstu - DoGeR - 28-08-2009
Kod:
<div=1>
<div=1.1></div>
<div=1.2></div>
<div=1.3></div>
</div>Kod:
#1 { height: auto; }
#1.1 { float: left; height: 100%; }
#1.2 { float: left; height: 100%; }
#1.3 { height: 100%; }Wyświetla 3 divy obok siebie
RE: 3 divy - height zależy od ilości tekstu - Fibi - 28-08-2009
zrobiłem jak napisałeś i wyszło tak:
div 1.1 jest ok
div 1.2 jest pod 1.1 (w pionie)
div 1.3 jest pod 1.1 (jeden na drugim)
RE: 3 divy - height zależy od ilości tekstu - DoGeR - 28-08-2009
Żeby nie było nieporozumień
Kod:
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>Kod:
#container { height: auto; }
#first { float: left; height: 100%; }
#second { float: left; height: 100%; }
#third { height: 100%; }U mnie wyświetla poprawnie
RE: 3 divy - height zależy od ilości tekstu - Fibi - 28-08-2009
mam tak:
Kod:
#left { height: auto; width: 800px;}
#lewa { height: 100%; width: 225px; float: left; clear: left; background: #bcd956;}
#belka { height: 100%; width: 13px; float: left; clear: left; background: #def883;}
#main { height: 100%; width: 562px; background: #bcd956;}Kod:
<div id="left">
<div id="lewa">treść</div>
<div id="belka"></div>
<div id="main">treść</div>
</div>i się nie zmienia wysokość to raz, a dwa nie widać w ogóle "belki" (diva 2).
RE: 3 divy - height zależy od ilości tekstu - DoGeR - 28-08-2009
W takim razie ja się poddaje :]
RE: 3 divy - height zależy od ilości tekstu - Labsta.com - 29-08-2009
Możesz użyć tabel CSS, ale to słaby pomysł.
Ja zwykle używam faux column: http://www.alistapart.com/articles/fauxcolumns/
A tu masz gotowe rozwiązania: http://www.code-sucks.com/css%20layouts/faux-css-layouts/ wystarczy wybrać opcje
RE: 3 divy - height zależy od ilości tekstu - T.Novi - 02-09-2009
użyj <br class="czyszczenie" />
XHTML:
<div>
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<br class="czyszczenie" />
</div>
CSS:
br.czyszczenie {
clear: both;
}
tylko dobrze przelicz width, suma trzech divów nie może być większa od tego w którym się znajdują