Diskuze: Potřebuji poradit s obtékáním obrázku v galerii
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Jan Steiner:25.1.2022 20:16
Nevím jestli jsi správně pochopil čeho potřebuji docílit, tak jsem upravil obrázek jak si představuji aby vypadal finál
Tos mel uvest jako prvni, kdyz to neumis popsat 
google = image galerry html5 css3
https://wpdatatables.com/…age-gallery/
-> https://salvattore.js.org/
google = https://salvattore.js.org/
Image Reflect CSS Gallery https://codepen.io/…full/ExaGgoa
https://codepen.io/…/full/PxjZvj https://codepen.io/…/full/PxjZvj
google = css grid image gallery // postupne, jak googlujes, tak doplnujes
slova do vyhledavani, ktera najdes
https://www.freecodecamp.org/…0f0fd666a5c/
Tady mas sikovne vyuziti gridu, ale ty hledas sloupcovy layout.
google = css column gallery
https://www.w3schools.com/…sponsive.asp
(w3schools.com neni moc spolehlivy zdroj, ocekavej obcas, ze neco nefunguje, jak
by melo)
--> google = css flex column images layout
<div class="row">
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
</div>
<style>
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>5 min googlovani. Kolik to trvalo tobe? Ze jsi jeste nezacal? To je bezna chyba zacatecnika, ani to nezkusi.
+20 Zkušeností
+2,50 Kč
Zobrazeno 5 zpráv z 5.