0

es una galería de imágenes con columnas tengo este código pero no es responsive, como lo convierto a responsive?

<!DOCTYPE html>
<html>
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
}

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 25%; /* si 25% son 4 columnas, si 50% son 2 columnas*/
    padding: 5px; /* espacio entre fotos */
}

.column img {
    margin-top: 5px; /* espacio entre fotos */
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Image Grid</h1>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/falls2.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
    <img src="/w3images/nature.jpg" style="width:100%">
    <img src="/w3images/mist.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/w3images/underwater.jpg" style="width:100%">
    <img src="/w3images/ocean.jpg" style="width:100%">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/mountainskies.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/underwater.jpg" style="width:100%">
  </div>  
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/falls2.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
    <img src="/w3images/nature.jpg" style="width:100%">
    <img src="/w3images/mist.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/w3images/underwater.jpg" style="width:100%">
    <img src="/w3images/ocean.jpg" style="width:100%">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/mountainskies.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/underwater.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

4
  • Hola. ¿Estás utilizando alguna librería o framework en particular?
    – Ferni
    Commented el 12 jul. 2018 a las 9:46
  • hola, no, solo el código que muestro
    – Basicmix
    Commented el 12 jul. 2018 a las 10:12
  • 2
    Por lo que veo ese código es un ejemplo de w3school. Te recomiendo revisar este otro ejemplo de la misma web: Responsive Image Grid
    – Ferni
    Commented el 12 jul. 2018 a las 10:58
  • es exactamente lo que quería, muchas gracias!
    – Basicmix
    Commented el 12 jul. 2018 a las 11:04

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.