Portál AbcLinuxu, 6. června 2024 05:22
<!DOCTYPE html>
<html>
<header>
<title>Columns</title>
</header>
<style>
@media screen and (min-width: 800px) {
.container {
columns: 2;
}
}
@media screen and (min-width: 1200px) {
.container {
columns: 3;
}
}
.container div {
margin: 1em;
display: inline-block;
background: lightgrey;
text-align: center;
padding: 30px;
}
</style>
<body>
<div class="container">
<div style="height: 100px; width: 300px">1</div>
<div style="height: 150px; width: 300px">2</div>
<div style="height: 180px; width: 300px">3</div>
<div style="height: 130px; width: 300px">4</div>
<div style="height: 140px; width: 300px">5</div>
<div style="height: 100px; width: 300px">6</div>
<div style="height: 120px; width: 300px">7</div>
</div>
</body>
</html>
Tiskni
Sdílej:
ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.