Obrazki i podpisy

Question

Co zrobić, aby obrazki wyświetlały się obok siebie i aby pod każdym z nich był napis?

HTML:http://pastebin.com/nv0HkfHM

CSS:http://pastebin.com/sANQiAxC

Comments

Trochę offtopując: nie używaj znacznika <br/> (a już na pewno nie w taki sposób jak robisz to tutaj), zastąp je CSS. Uprzedzając pytanie, tu masz odpowiedź: http://stackoverflow.com/questions/1726073/is-it-sometimes-bad-to-use-br

Answer 1

to jest tak jakby lista projektów, więc zrób to jako listę ;)

            <div class="projects">
				<ul>
				
					<li> 
						<img class="image" src="projekt.jpg">
						<p>1WD.TV Project</p> 
					</li>
					<li> 
						<img class="image" src="projekt.jpg">
						<p>1WD.TV Project</p> 
					</li>
					<li> 
						<img class="image" src="projekt.jpg">
						<p>1WD.TV Project</p> 
					</li>
				
				</ul>

li{
    list-style-type: none;
    display: inline-block;
}
.image{
    margin: 20px;
    width: 150px;
}

 

Answer 2

Trzeba się pobawić float:left ;)

Comments

lepiej po prostu display: inline-block; i niech się wyświetlają tak jak elementy blokowe (z ustawioną szerokością i wysokością) i jednocześnie liniowe (ustawiają się z automatu jeden obok drugiego) ;p

---

Moszna ;)