Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] Dwa divy obok siebie, jak zrobić aby miały taką samą wysokość, Dynamicznie
dk1342
post 23.08.2011, 21:12:46
Post #1





Grupa: Zarejestrowani
Postów: 275
Pomógł: 9
Dołączył: 24.07.2008
Skąd: Racibórz

Ostrzeżenie: (10%)
X----

Witam wszystkich, otóż mój problem jest taki: Mam stronę podzieloną na dwa divy. Jeden jest szerszy (tresc), drugi węższy (np na panele). I sprawa jest taka, że mam więcej treści w divie tym po lewej (szerszym) niż w tym po prawej, natomiast chce aby ten div po prawej też szedł do samego dołu, dorównując temu po lewej. Wiem, że mogę to zrobić dając na stałe height obu divom ale takiego rozwiązania jednak nie chce, bo wysokość będzie różna-dynamiczna. Jak mogę rozwiązać ten problem, aby drugi div dorównywał pierwszemu, nie ustalając height na stałe ?

Przykład obrazkowy:

Tak jest:


Tak chciałbym:


Przykładowy kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Test</title>
  4. <style type="text/css">
  5. #srodek
  6. {
  7. 	width: 500px;
  8. 	margin: auto;
  9. 	border: 1px solid #000;
  10. }
  11. #lewa
  12. {
  13.     width: 300px;
  14. 	float: left;
  15. 	background: #ccc;
  16. }
  17. #prawa
  18. {
  19.    width: 200px;
  20.    float: left;
  21.    background: #000;
  22.    color: #fff;
  23. }
  24. .cleared
  25. {
  26. 	float: none;
  27. 	clear: both;
  28. 	margin: 0;
  29. 	padding: 0;
  30. 	border: none;
  31. 	font-size:1px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="srodek">
  37. <div id="lewa">
  38. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  39. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  40. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  41. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  42. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  43. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  44. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 			
  45. </div>
  46. <div id="prawa">
  47. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  48. </div>
  49. <div class="cleared"></div>
  50. </div>
  51. </body>
  52. </html>
[HTML] pobierz, plaintext


Ten post edytował dk1342 23.08.2011, 21:18:43


--------------------
Firefox - The Best,
Internet Exokier - shit
Go to the top of the page
+Quote Post
tolomei
post 23.08.2011, 21:22:26
Post #2





Grupa: Zarejestrowani
Postów: 450
Pomógł: 135
Dołączył: 18.11.2010
Skąd: Wschowa

Ostrzeżenie: (0%)
-----

jQuery:

[HTML] pobierz, plaintext 
  1. <head>
  2.    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  3.    <script type="text/javascript">
  4.       $(function(){
  5.          var wysokosc = $("div#lewa").height();
  6.          $("div#prawa").css("height",wysokosc+"px");
  7.       });
  8.    </script>
  9. </head>
[HTML] pobierz, plaintext


Możesz także ściągnąć skrypt źródłowy i załadować z dysku serwera.

Pozdro


--------------------
“ Computers are good at following instructions, but not at reading your mind. ”
- Donald Knuth
Go to the top of the page
+Quote Post
dk1342
post 23.08.2011, 21:26:00
Post #3





Grupa: Zarejestrowani
Postów: 275
Pomógł: 9
Dołączył: 24.07.2008
Skąd: Racibórz

Ostrzeżenie: (10%)
X----

Też myślałem o js. Jednak akurat w tym przypadku potrzebne mi to jest do tworzenia aukcji na allegro a tam niestety zabronione js. Jest w ogóle taka możliwość bez JS'a ?


--------------------
Firefox - The Best,
Internet Exokier - shit
Go to the top of the page
+Quote Post
boro11
post 23.08.2011, 21:45:55
Post #4





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 9.07.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Da się zrobić coś takiego w CSS'ie

Wystarczy zrobić obrazek tła po lewej który będzie szaro-czarny. I on będzie "robił" za to tło czarne. Gdzie widziałem tutorial do tego jak miałem podobny problem ale niestety nie jestem w stanie sobie przypomnieć gdzie.

Daj im z-index: 1; i dla tego po prawej 2 i powinno śmigać smile.gif

A to tak na szybko znalezione:
http://www.dictum.netlook.pl/blog/?p=6

Nie testowałem tego i jest dosyć dziwne ale kto wie może nawet działa, nie mniej jednak polecam pierwszą metodę.
Go to the top of the page
+Quote Post
tolomei
post 23.08.2011, 21:46:00
Post #5





Grupa: Zarejestrowani
Postów: 450
Pomógł: 135
Dołączył: 18.11.2010
Skąd: Wschowa

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <div id="srodek"> 
  2.     <div id="lewy">bla bla<br /> bla bla <br />bla bla <br />bla bla bla bla bla <br />bla bla bla bla bla </div> 
  3.    <div id="prawy">bla bla bla bla </div> 
  4. </div>
[HTML] pobierz, plaintext


CSS:
Kod
#srodek { overflow: hidden; }
#lewy { float: left; background: red; }
#prawy { float: right; background: blue; }
#lewy, #prawy { width: 50%; padding-bottom: 2000px; margin-bottom: -2000px; }


Nie mojego autorstwa - znalazłem w sieci, ale działa smile.gif

Ten post edytował tolomei 23.08.2011, 21:49:03


--------------------
“ Computers are good at following instructions, but not at reading your mind. ”
- Donald Knuth
Go to the top of the page
+Quote Post
dk1342
post 23.08.2011, 22:02:42
Post #6





Grupa: Zarejestrowani
Postów: 275
Pomógł: 9
Dołączył: 24.07.2008
Skąd: Racibórz

Ostrzeżenie: (10%)
X----

Suuper. Dziękuje.


--------------------
Firefox - The Best,
Internet Exokier - shit
Go to the top of the page
+Quote Post
!*!
post 24.08.2011, 09:01:42
Post #7





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----

Może i powyższe metody działają, ale są złe. Można uzyskać to bez konieczności manipulacji marginesem czy szerokością procentową.

Nieinwazyjna wersja CSS:
http://jsfiddle.net/Q48Bv/

Ten post edytował !*! 24.08.2011, 09:05:21


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 12.06.2024 - 09:55
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn