Złe wyświetlanie tablicy przy udziale DIV(bez DIV dobre) Opcje

[waqmaz]

[PHP] pobierz, plaintext 
			$mapa=array(array('opona.jpg','kupa.jpg', 'drzewo.jpg'),
						array('swinia.jpg','kukla.jpg', 'usmiech.jpg'),
						array('pilka.jpg','palm.jpg', 'auto.jpg'));
 
			for($rzad=0;$rzad<3;$rzad++){
				for($kolumna=0;$kolumna<3;$kolumna++){
				echo "<div class=\"prostokat\"><img src=\"";
				echo $mapa[$rzad][$kolumna];
				echo "\"/></div>";
				}
				echo "<br>";
			}
[PHP] pobierz, plaintext 

Z takim kodem mi wyświetla źle:


Jednak, gdy usunę DIVY:

[PHP] pobierz, plaintext 
				for($kolumna=0;$kolumna<3;$kolumna++){
				echo "<img src=\"";
				echo $mapa[$rzad][$kolumna];
				echo "\"/>";
[PHP] pobierz, plaintext 

To już mi wyświetla dobrze tablicę:


Tyle, że ja chcę mieć z DIVAMI, bo mam tam tryby podświetlania tych obrazków w CSS, no i graficzną tablicę. Nic nie rozumiem. Pomożecie?


Ten post edytował waqmaz 7.09.2011, 16:34:34

[mortus]

Spróbuj nadać klasie prostokat styl:

[CSS] pobierz, plaintext 
.prostokat {
 display: inline;
}
[CSS] pobierz, plaintext 

Ewentualnie:

[PHP] pobierz, plaintext 
for($rzad = 0; $rzad < 3; $rzad++) {
 echo '<div class="rzad">';
 for($kolumna = 0; $kolumna < 3; $kolumna++) {
  echo '<div class="prostokat"><img src="'.$mapa[$rzad][$kolumna].'"></div>';
 }
 echo '<div class="czysc"></div>';
 echo '</div>';
}
[PHP] pobierz, plaintext 

No i wtedy styl:

[CSS] pobierz, plaintext 
.rzad {
 width: 150px;
}
.prostokat {
 width: 50px; /* 1/3 szerokości rzad */
 float: left;
}
.czysc {
 clear: both;
}
[CSS] pobierz, plaintext 

Można również obrazek wstawić jako tło div-ów.

[waqmaz]

Żaden z podanych sposobów nie zadziałał. Ale dzięki za chęci, pogłowię się jeszcze nad tym "niby banałem".

[dmateo]

Jeśli masz możliwość udostępnij stronę na zewnątrz, sposób mortusa powinien zadziałać, może gdzie indziej jest problem.

[waqmaz]

Całą reszta jest dobra. Wszystko mieści się w jednym wielkim DIVIE, który tworzy szkielet mojej strony. Po prostu wyświetlam w nim obrazki. Nie wiem, dlaczego nie działa. Kiedy daję display:inline;, wtedy po prostu wyświetla mi poziomo, a nie, jak wcześniej - pionowo. Chcę, aby były trzy pod trzema.
111
111
111
W taki sposób ; /

Aha, możliwe, że to przez zmianę width i height, bo:


.prostokat {
width: 200px;
height: 60px;
float: left;
}

Więc jeśli przez to, cóż mam dalej czynić?

[mortus]

[PHP] pobierz, plaintext 
echo '<div id="obrazki">';
 for($rzad = 0; $rzad < 3; $rzad++) {
  echo '<div class="rzad">';
  for($kolumna = 0; $kolumna < 3; $kolumna++) {
   echo '<div class="prostokat"><img src="'.$mapa[$rzad][$kolumna].'"></div>';
  }
  echo '<div class="czysc"></div>';
  echo '</div>';
 echo '</div>';
}
[PHP] pobierz, plaintext 

[CSS] pobierz, plaintext 
#obrazki {
 width: 600px;
 height: 180px;
}
.rzad {
 width: 600px;
 height: 60px;
}
.prostokat {
 width: 200px;
 height: 60px;
 float: left;
}
.czysc {
 clear: both;
}
[CSS] pobierz, plaintext 

Jeśli chcesz dodać odstępy pomiędzy obrazkami, to musisz wszystko przeliczyć z marginesami zewnętrznymi lub wewnętrznymi.

Ten post edytował mortus 7.09.2011, 21:26:31

[wdev]

Nie chodzi przypadkiem o "display: inline-block" ?

Btw, temat nie na PHP