Witam.
Na wstępie pewnie standardowy tekst:
"Z góry przepraszam, że może temat jest odgrzewany ale niestety nic nie znalazłem co by mnie naprowadziło na rozwiązanie"
Piszę właśnie własną stronę internetową.
Pośród różnych treści chcę aby w jednej linii umieszczone były trzy zdjęcia obok siebie i wyśrodkowane względem diva.
------------------------------------------------------------------------------
Zapis html:
<div class="ikony">
<div class="qb1">
<div class="ikonka1"><img src="1.png">opis1</div>
</div>
<div class="qb2">
<div class="ikonka2"><img src="2.png">opis2</div>
</div>
<div class="qb3">
<div class="ikonka3"><img src="3.png">opis3</div>
</div>
<div style="clear: both"></div>
</div>
-------------------------------------------------------------------------------------
CSS
.ikony
{
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 1.2em;
color: white;
line-height: 40px;
}
.qb1
{
max-width: 230px;
display: inline-block;
float: left;
}
.qb2
{
max-width: 230px;
display: inline-block;
}
.qb3
{
max-width: 230px;
display: inline-block;
float: right;
}
----------------------------------------------------
Oczywiście nie twierdzę, że powyższy kod jest w 100% prawidłowy.
Problem polega jednak w momencie, kiedy chcę zmniejszyć stronę do rozdzielczości telefonu bo zaczyna ona przesuwać lub ucinać zdjęcia
Chciałbym, aby w momencie zejścia do szerokości 480px, zdjęcia automatycznie ułożyły się pionowo i wyśrodkowały względem nowej, mniejszej rozdzielczości.
Wiem, że jest możliwość poniższa:
@media only screen and (max-width: 480px)
{
}
Tylko nie wiem jak miałbym to zapisać. Próbowałem różnych zapisów ale bez skutku.
Może i zostanę zmieszany z błotem ale skupiam się na razie na obsłudze samego html i css.
JQuery, bootstrapy itp są nadal dla mnie czarną magią i prosiłbym o wsparcie w zakresie html/css.
Z góry dzięki!