Forum PHP.pl > [CSS]Dopasowanie liniowych divów do szerokości niezależnie od treści

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Dopasowanie liniowych divów do szerokości niezależnie od treści

Slash0r

31.10.2012, 17:47:58

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

Sebek87

31.10.2012, 18:06:19

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 
$n=0;
[PHP] pobierz, plaintext

w pętli:

[PHP] pobierz, plaintext 
$n ++; $n = ($n % 4);
[PHP] pobierz, plaintext

i warunek w elemencie:

[HTML] pobierz, plaintext 
<div<?= ($n === 0 ? ' style="margin-right:0;"' : '') ?>></div>
[HTML] pobierz, plaintext

Slash0r

31.10.2012, 23:25:17

No niestety właśnie tak robiłem i daje to efekt taki jak u góry mojego profesjonalnego rysunku:

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.

AdIoS_Neo

1.11.2012, 08:53:43

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 
<!DOCTYPE html>
<html lang="pl">
<head>
	<title>Dynamiczne marginesy</title>
	<meta charset="utf-8" />
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		#content{
			width: 758px; /* 758 + 2*20 + 2 */
			height: 358px; /* 358 + 2*20 + 2 */
			margin: 100px 0 0 100px;
			padding: 20px;
			border: 1px solid #0000ff;
			text-align: center;
		}
		#content > div{
			float: left;
			height: 98px;
			border: 1px solid #000000;
		}
		#content > div:last-child{
			float: right;
		}
	</style>
</head>
<body>
<div id="content">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>
<script type="text/javascript">
	window.onload = function(){
		/* losowanie szerokości div'ów na potrzeby testów */
		var divs = document.getElementById("content").getElementsByTagName("div");
		for(var i=0;i<divs.length;i++){
			divs[i].style.width = Math.floor(Math.random()*101+90) + "px";
		}
 
		/* liczenie marginesu */
		var divs = document.getElementById("content").getElementsByTagName("div");
		var m = 758; // --- #contetn width
		for(var i=0;i<divs.length;i++){
			m -= parseInt(divs[i].style.width);
		}
		m -= 2 * 1 * 4; // m - 2 borders ( left border & right border ) * border width * 4 divs
		divs[1].style.margin = "0px " + m/3 +"px";
	}
</script>
</body>
</html>
[HTML] pobierz, plaintext

Slash0r

1.11.2012, 17:15:09

@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

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.