Galeria — CSS

Bez podpisów

Wystarczy nadać elementom listy display:inline. Wtedy obrazki automatycznie ułożą się w linie i będą przenoszone do nowej linii.

Z podpisami

inline-block Bug w IE Bug w FF

Reguły:

 li {display:inline-block;}
 img {display:block;}

spowodują, że elementy listy będą się układały podobnie jak przy display:inline, ale będą mogły zawierać w sobie blokowy obrazek, który wymusi przeniesienie opisu do nowej linii.

float

Jeśli obrazki mają taką samą wysokość, można użyć float zamiast display:inline-block. Różne wysokości elementów z float spowodują chaotyczne przenoszenie się do nowej linii.

Rozwinąć

Miniatury w nowym oknie

Otwieranie okien wymaga JavaScript. Najlepiej użyć gotowego skryptu.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.


Zmodyfikowano: 17.08.2007, 21:03