Forum PHP.pl > tabelaryczne rozmieszczenie DIV-ów

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: tabelaryczne rozmieszczenie DIV-ów

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

czachor

12.09.2007, 20:50:13

Witam,

potrzebuję rozmieścić obok siebie N obrazków z podpisem pod każdym (czyli po prostu galeria). Przenoszenie do następnego rzędu oczywiście robi się samo na zasadzie "nie mieści się".

Próbuję zrobić to w ten sposób:

[HTML] pobierz, plaintext 
<html>
<head>
 
<style>
div {
	display: inline;
}
</style>
 
</head>
<body>
 
<div>
    <img src="bm166.jpg" alt="" />
    podpis
</div>
 
<div>
    <img src="bm166.jpg" alt="" />
    podpis
</div>
 
<div>
    <img src="bm166.jpg" alt="" />
    podpis
</div>
 
<div>
    <img src="bm166.jpg" alt="" />
    podpis
</div>
 
<div>
    <img src="bm166.jpg" alt="" />
    podpis
</div>
 
<div>
    <img src="bm166.jpg" alt="" />
    podpis
</div>
 
//itd
 
</body>
</html>
[HTML] pobierz, plaintext

Wynik: obrazki są obok siebie, ale podpis nie układa się pod obrazek. Aha, nie chcę zrobić sztywnej liczby obrazków w rzędzie.

Nie wiem już, jak to zrobić, kombinowałem z clear, ale nic z tego. Wydawało mi się, że to prosta sprawa, ale chyba czegoś nie zauważam...

Z góry dzięki za pomoc!

phpion

12.09.2007, 20:56:50

[HTML] pobierz, plaintext 
<div>
    <img src="bm166.jpg" alt="" />
    <p>podpis</p>
</div>
[HTML] pobierz, plaintext

tehn

12.09.2007, 21:00:39

albo <br/> po obrazku...

czachor

12.09.2007, 21:03:39

Właśnie w tym problem, że tak próbowałem, ale w obu przypadkach obrazki układają się jeden pod drugim...

phpion

12.09.2007, 21:16:37

To może w stylach nadaj szerokość dla <p> taką, jaką ma obrazek.

tehn

12.09.2007, 21:19:05

spróbuj w stylu dla diva dać float: left lub right albo użyć zamiast divów spany... coś powinno zadziałać...

czachor

12.09.2007, 22:16:56

Przy pomocy kilku osób mam to:

[HTML] pobierz, plaintext 
<style>
div {
    float: left;
    margin: 3px;
}
 
p {
    clear: left;
    text-align: center;
}
</style>
 
...
 
<div>
    <img src="bm166.jpg" alt="" />
    <p>podpis</p>
</div>
[HTML] pobierz, plaintext

Działa jak trzeba.

Mam jeszcze jedno pytanie... Teraz chciałbym to wyśrodkować w poziomie i pionie, ale text-align, margin: auto ani vertical-align nie działa... Ten float trochę jest tego powodem... wie ktoś, jak to ugryźć?

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.