Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS]Dopasowanie liniowych divów do szerokości niezależnie od treści
Slash0r
post
Post #1





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 9.12.2010

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

Witam,
mam następujący problem. Mam 4 divy o dynamicznie ustalanej szerokości w lini (całkowita szerokość <800px), umieszczone w kolejnym divie o szerokości 800px. Co powinienem zrobić aby krawędź lpierwszego diva w rzędzie zawsze przylegała do lewej krawędzi kontenera a krawędź czwartego w rzędzie do prawej krawędzi kontenera. Innymi słowy potrzebuje dynamiczne marginesy między każdym divem w kontenerze, tak aby wszystkie 4 zawsze wypełniały całe 800 pikseli. Jak?

pozdrawiam

Ten post edytował Slash0r 31.10.2012, 17:48:24
Go to the top of the page
+Quote Post
Sebek87
post
Post #2





Grupa: Zarejestrowani
Postów: 74
Pomógł: 24
Dołączył: 21.10.2012
Skąd: Puławy

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

Ustal na sztywno w css prawy margines dla wszystkich elementów tak, aby wypełniały cały kontener, ale z czwartego usuwaj go poprzez style="margin:0;". Jeśli wyświetlasz te elementy pętlą np. w PHP to:
[PHP] pobierz, plaintext 
  1. $n=0;
[PHP] pobierz, plaintext
w pętli:
[PHP] pobierz, plaintext 
  1. $n ++; $n = ($n % 4);
[PHP] pobierz, plaintext
i warunek w elemencie:
[HTML] pobierz, plaintext 
  1. <div<?= ($n === 0 ? ' style="margin-right:0;"' : '') ?>></div>
[HTML] pobierz, plaintext


Ten post edytował Sebek87 31.10.2012, 18:08:18
Go to the top of the page
+Quote Post
Slash0r
post
Post #3





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 9.12.2010

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

No niestety właśnie tak robiłem i daje to efekt taki jak u góry mojego profesjonalnego rysunku:
(IMG:http://s16.postimage.org/l38vcguar/info.png)
Mi chodzi o efekt ten w drugiej lini. Divy 1 i 4 (licząc od lewej) są przywiązane do krawędzi kontenera stałym marginesem, 2 i 3 niejako środkują się między nimi. Wszystko niezależnie od szerokości diva.

Ten post edytował Slash0r 31.10.2012, 23:26:12
Go to the top of the page
+Quote Post
AdIoS_Neo
post
Post #4





Grupa: Zarejestrowani
Postów: 159
Pomógł: 43
Dołączył: 8.03.2009

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

Witam,
napisałem mały skrypcik który rozwiązuje sprawę, mam nadzieje że się połapiesz (jeśli te divy mają jakieś paddingi to je też trzeba uwzględnić i odjąć od zmiennej m za pętlom):
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. 	<title>Dynamiczne marginesy</title>
  5. 	<meta charset="utf-8" />
  6. 	<style type="text/css">
  7. 		*{
  8. 			margin: 0px;
  9. 			padding: 0px;
  10. 		}
  11. 		#content{
  12. 			width: 758px; /* 758 + 2*20 + 2 */
  13. 			height: 358px; /* 358 + 2*20 + 2 */
  14. 			margin: 100px 0 0 100px;
  15. 			padding: 20px;
  16. 			border: 1px solid #0000ff;
  17. 			text-align: center;
  18. 		}
  19. 		#content > div{
  20. 			float: left;
  21. 			height: 98px;
  22. 			border: 1px solid #000000;
  23. 		}
  24. 		#content > div:last-child{
  25. 			float: right;
  26. 		}
  27. 	</style>
  28. </head>
  29. <body>
  30. <div id="content">
  31. 	<div>1</div>
  32. 	<div>2</div>
  33. 	<div>3</div>
  34. 	<div>4</div>
  35. </div>
  36. <script type="text/javascript">
  37. 	window.onload = function(){
  38. 		/* losowanie szerokości div'ów na potrzeby testów */
  39. 		var divs = document.getElementById("content").getElementsByTagName("div");
  40. 		for(var i=0;i<divs.length;i++){
  41. 			divs[i].style.width = Math.floor(Math.random()*101+90) + "px";
  42. 		}
  43.  
  44. 		/* liczenie marginesu */
  45. 		var divs = document.getElementById("content").getElementsByTagName("div");
  46. 		var m = 758; // --- #contetn width
  47. 		for(var i=0;i<divs.length;i++){
  48. 			m -= parseInt(divs[i].style.width);
  49. 		}
  50. 		m -= 2 * 1 * 4; // m - 2 borders ( left border & right border ) * border width * 4 divs
  51. 		divs[1].style.margin = "0px " + m/3 +"px";
  52. 	}
  53. </script>
  54. </body>
  55. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Slash0r
post
Post #5





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 9.12.2010

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

@AdIoS_Neo
Super, bardzo mi pomogłeś! Widzę, że skrypt pobiera wartość width z taga style="". O szerokości diva decyduje jednak obrazek. Czy byłbyś w stanie nieznacznie zmodyfikować ten skrypt, tak aby zamiast pobierania wartości z taga style="", pobierał wartość z wstawionego w każdy div obrazka (obrazek wstawia PHP, a konkretnie to tylko link do niego w tag src="")? Niestety dopiero raczkuję w JS i miałbym z tym problem. Byłbyś moim mistrzem (IMG:style_emoticons/default/smile.gif)

Ten post edytował Slash0r 1.11.2012, 17:56:51
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 23.08.2025 - 12:32
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn