AYUDA !! Como poner imagenes en fila y en columnas

  • Autor Autor Andres1975
  • Fecha de inicio Fecha de inicio
A

Andres1975

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola amigos, necesito ayuda para poner imágenes en una entrada, por ejemplo 4 imágenes , una al lado de otro y abajo otras 4 y así sucesivamente.
no se si me he explicado correctamente.

saludos y gracias !!
 
Creo que no te estas explicando bien.
 
Algo así es lo que intento hacer


Los recuadros en blanco serian las imágenes

ImagenForo.gif
 
Eso lo puedes hacer solo usando estilos en css
 
Es muy facil hacerlo con html y css grid, en caso de que se te dificulte puedo ayudarte
 

Adjuntos

  • FB_IMG_1663637193106.webp
    FB_IMG_1663637193106.webp
    34,1 KB · Visitas: 27
Si lo deseas para una página o entrada de blog en específico, si es tal como te recomendaron a punte css lo acomodas. O si no puedes buscar un proyecto en codepen. En google incluso colocas el tema terminando agregando la palabra " codepen", y te debe salir algunos proyectos donde tomarías el que mas te agrade y lo modificas al gusto. Por supuesto igual debes saber lo básico para modificar.
 
Puedes hacerlos puro HTML con tablas, busca HTML table generator en google y alli podrás personalizar los espacios, otro en con el css display:flex; Pero si eres alguien nuevo te harás bolas, mejor con tabla html nomás.
 
si no me equivoco puedes hacer con display:flex;float:left;

estoy aprendiendo apenas.. >-<
 
Depende de la dimension de la imagen (img), el margen y el ancho del contenedor donde estan.
Si tiene las imagenes 100px x 100px

El contenedor donde estan dentro las imágenes (div, ul, etc,) le pones (ya sea div id = # o div class = .) ...
HTML:
.nombreDelContenedor {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 462px;

Y con el ancho (width) que le des se 'juntan' y con margin: 0 auto; se centra todo el contenedor

HTML:
<!doctype html>
<head>
<style>
.centrar img{
  width: 100px;
  height: 100px;
}
.centrar {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
  width: 440px;
  background: #444;
  margin: 0 auto;
}
.centrar li {
  margin: 2px;
}
</style>
</head>
<body>
<div class='centrar'>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
</div>
</body>
</html>
 
Depende de la dimension de la imagen (img), el margen y el ancho del contenedor donde estan.
Si tiene las imagenes 100px x 100px

El contenedor donde estan dentro las imágenes (div, ul, etc,) le pones (ya sea div id = # o div class = .) ...
HTML:
.nombreDelContenedor {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 462px;

Y con el ancho (width) que le des se 'juntan' y con margin: 0 auto; se centra todo el contenedor

HTML:
<!doctype html>
<head>
<style>
.centrar img{
  width: 100px;
  height: 100px;
}
.centrar {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
  width: 440px;
  background: #444;
  margin: 0 auto;
}
.centrar li {
  margin: 2px;
}
</style>
</head>
<body>
<div class='centrar'>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
<li><a href=" "><img src="1.jpeg"></a></li>
</div>
</body>
</html>
Excelente compa, eso era lo que estaba buscando, muchas gracias !!
 
Aqui se ve mejor
 
Atrás
Arriba