AJUDA !! Como colocar imagens em linha e em colunas

  • Autor Autor Andres1975
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
A

Andres1975

Gamma
Usuário com poucas negociações! Use sempre o saldo do 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 !!
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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
 

Anexos

  • FB_IMG_1663637193106.webp
    FB_IMG_1663637193106.webp
    34,1 KB · Visitas: 38
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
 
Voltar
Topo