Diseño dinámico de columnas de estilo de Pinterest responsive con CSS puro
| Autor: | yaochuxia |
|---|---|
| Views Total: | 4,858 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 30, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
< span style = "color: #000000;" > solo otra implementación CSS pura del diseño de cuadrícula adaptable al estilo de Pinterest que automáticamente & ajusta dinámicamente el número de columnas de la cuadrícula en función del tamaño de la pantalla.
Funcionamiento
Añade ' pines ' a tu página web como sigue.
<div id="main"> <div class="box"> <div class="pic"> <img src="1.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="2.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="3.jpg"> </div> </div> <div class="cl"></div> </div>
Los principales estilos CSS para el diseño de cuadrícula.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: #ddd;
}
img { border: 0; }
a {
text-decoration: none;
color: #000;
}
.cl { clear: both; }
section {
text-align: center;
line-height: 60px;
}
#main {
-webkit-column-width: 202px;
-moz-column-width: 202px;
o-column-width: 202px;
-ms-column-width: 202px;
column-width: 202px;
}
.box { padding: 10px 0 0 15px; }
.pic {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 180px;
box-shadow: 0 0 5px #666;
}
.pic img {
width: 180px;
height: auto;
display: block;
}
