Skip to main content
se añadieron 68 caracteres en el cuerpo
Origen Enlace
ffflabs
  • 23k
  • 28
  • 50
* { text-align: center; }
      h1 { font-family: arial; text-align: center;}
      p { font-family: arial; text-align: justify; margin: 25px;}
      img {width: 300px; height: 225px ; margin: 10px;10px;float:left }
 
.patrocinio1, .patrocinio2, .patrocinio3 {
 clear:left;
 float:left;
}

.patrocinio1 img {
   width: 300px; height: 225px ;
}

.patrocinio2 img {
   width: 200px; height: 125px ;
}

.patrocinio3 img {
  width: 400px; height: 325px ;
}
 
<h1>Album de imágenes de ejemplo</h1>
   <p></p>
  <div class="patrocinio1">
     <p>Patrocinio 1</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/CMIC_Fondo-de-fondos_logo_baja-e1488219473944.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/LOGO-MV-e1488219523437.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Nafin_logo_1-e1488219676293.png" alt="imagen1">
  </div>     
     <br>
     
  <div class="patrocinio2">
     <p>Patrocinio 2</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/SP-Global.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Creel_logo-nuevo.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Piedmont-blue.jpg" alt="imagen2">
     <br>
  </div>

  <div class="patrocinio3">
     <p>Patrocinio 3</p>   
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/FAZENDA-LOGO-2.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Grupo-IGS_logo.jpg" alt="imagen1">
     <br>
  </div>

Esto se puede hacer de muchas maneras. El div puede ser un span, o puede ser tu mismo elemento p si éste envolviese a las imágenes. En vez de clase puede ser un id, y así sucesivamente. El código que te pongo es sólo una manera más.

EDIT añadí un estilo para que las imagenes se puedan alinear horizontalmente, eso si es que su ancho lo permite.

* { text-align: center; }
      h1 { font-family: arial; text-align: center;}
      p { font-family: arial; text-align: justify; margin: 25px;}
      img {width: 300px; height: 225px ; margin: 10px; }
      
.patrocinio1 img {
   width: 300px; height: 225px ;
}

.patrocinio2 img {
   width: 200px; height: 125px ;
}

.patrocinio3 img {
  width: 400px; height: 325px ;
}
 
<h1>Album de imágenes de ejemplo</h1>
   <p></p>
  <div class="patrocinio1">
     <p>Patrocinio 1</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/CMIC_Fondo-de-fondos_logo_baja-e1488219473944.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/LOGO-MV-e1488219523437.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Nafin_logo_1-e1488219676293.png" alt="imagen1">
  </div>     
     <br>
     
  <div class="patrocinio2">
     <p>Patrocinio 2</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/SP-Global.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Creel_logo-nuevo.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Piedmont-blue.jpg" alt="imagen2">
     <br>
  </div>

  <div class="patrocinio3">
     <p>Patrocinio 3</p>   
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/FAZENDA-LOGO-2.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Grupo-IGS_logo.jpg" alt="imagen1">
     <br>
  </div>

Esto se puede hacer de muchas maneras. El div puede ser un span, o puede ser tu mismo elemento p si éste envolviese a las imágenes. En vez de clase puede ser un id, y así sucesivamente. El código que te pongo es sólo una manera más.

* { text-align: center; }
      h1 { font-family: arial; text-align: center;}
      p { font-family: arial; text-align: justify; margin: 25px;}
      img {width: 300px; height: 225px ; margin: 10px;float:left }

.patrocinio1, .patrocinio2, .patrocinio3 {
 clear:left;
 float:left;
}

.patrocinio1 img {
   width: 300px; height: 225px ;
}

.patrocinio2 img {
   width: 200px; height: 125px ;
}

.patrocinio3 img {
  width: 400px; height: 325px ;
}
<h1>Album de imágenes de ejemplo</h1>
   <p></p>
  <div class="patrocinio1">
     <p>Patrocinio 1</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/CMIC_Fondo-de-fondos_logo_baja-e1488219473944.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/LOGO-MV-e1488219523437.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Nafin_logo_1-e1488219676293.png" alt="imagen1">
  </div>     
     <br>
     
  <div class="patrocinio2">
     <p>Patrocinio 2</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/SP-Global.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Creel_logo-nuevo.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Piedmont-blue.jpg" alt="imagen2">
     <br>
  </div>

  <div class="patrocinio3">
     <p>Patrocinio 3</p>   
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/FAZENDA-LOGO-2.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Grupo-IGS_logo.jpg" alt="imagen1">
     <br>
  </div>

Esto se puede hacer de muchas maneras. El div puede ser un span, o puede ser tu mismo elemento p si éste envolviese a las imágenes. En vez de clase puede ser un id, y así sucesivamente. El código que te pongo es sólo una manera más.

EDIT añadí un estilo para que las imagenes se puedan alinear horizontalmente, eso si es que su ancho lo permite.

Origen Enlace
ffflabs
  • 23k
  • 28
  • 50

Tendrías que envolver cada una de tus filas en un contenedor de tal manera que pudieras darle una clase en común a cada uno de los elementos contenidos en éste.

Luego en tu css le asignarías ancho y alto a las img dentro de la clase

* { text-align: center; }
      h1 { font-family: arial; text-align: center;}
      p { font-family: arial; text-align: justify; margin: 25px;}
      img {width: 300px; height: 225px ; margin: 10px; }
      
.patrocinio1 img {
   width: 300px; height: 225px ;
}

.patrocinio2 img {
   width: 200px; height: 125px ;
}

.patrocinio3 img {
  width: 400px; height: 325px ;
}
 
<h1>Album de imágenes de ejemplo</h1>
   <p></p>
  <div class="patrocinio1">
     <p>Patrocinio 1</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/CMIC_Fondo-de-fondos_logo_baja-e1488219473944.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/LOGO-MV-e1488219523437.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Nafin_logo_1-e1488219676293.png" alt="imagen1">
  </div>     
     <br>
     
  <div class="patrocinio2">
     <p>Patrocinio 2</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/SP-Global.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Creel_logo-nuevo.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Piedmont-blue.jpg" alt="imagen2">
     <br>
  </div>

  <div class="patrocinio3">
     <p>Patrocinio 3</p>   
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/FAZENDA-LOGO-2.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Grupo-IGS_logo.jpg" alt="imagen1">
     <br>
  </div>

Esto se puede hacer de muchas maneras. El div puede ser un span, o puede ser tu mismo elemento p si éste envolviese a las imágenes. En vez de clase puede ser un id, y así sucesivamente. El código que te pongo es sólo una manera más.