Skip to main content
Deixar 3 cartas lado a lado
Fonte Link
img.image {
  width: 220px;
  box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px;
  border-radius: 0.5em;
  margin: 15px;
}

div.container {
   display: flex;grid;
  flex/* Vai criar 3 colunas de mesmo tamanho, ocupando todo tamanho da tela */
  /* grid-wraptemplate-columns: wrap;repeat(3, 1fr); */
  
  /* Caso queira informa um tamanho para a coluna*/
  grid-template-columns: repeat(3, 250px);
}

button {
  cursor: pointer;
}
img.image {
  width: 220px;
  box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px;
  border-radius: 0.5em;
  margin: 15px;
}

div.container {
  display: flex;
  flex-wrap: wrap;
}

button {
  cursor: pointer;
}
img.image {
  width: 220px;
  box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px;
  border-radius: 0.5em;
  margin: 15px;
}

div.container {
   display: grid;
  /* Vai criar 3 colunas de mesmo tamanho, ocupando todo tamanho da tela */
  /* grid-template-columns: repeat(3, 1fr); */
  
  /* Caso queira informa um tamanho para a coluna*/
  grid-template-columns: repeat(3, 250px);
}

button {
  cursor: pointer;
}
adicionou 464 caracteres ao conteúdo
Fonte Link

Você pode fazer um container para armazenar as imagens lado a lado

<button>Nova imagem</button>

<div class="container"></div>

usando o css e adicionando display flex ou display grid no container você consegue deixar todas as imagens lado a lado

CSS

img.image {
  width: 220px;
  box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px;
  border-radius: 0.5em;
  margin: 15px;
}

div.container {
  display: flex;
  flex-wrap: wrap;
}

button {
  cursor: pointer;
}

E o codigo Javascript para criar novas imagens e adicionar no container

JS:

<script>
    // Quando clicar no botão vai chamar a função de nova imagem
    document.querySelector('button')
      .addEventListener('click', newImage)

    const images = [
      { source: "https://i.ibb.co/xC9r03B/0.jpg" },
      { source: "https://i.ibb.co/hD5gs5R/1.jpg" },
    ]

    function newImage() {
      // Vai gerar um número aleatorio (random) que vai arredondar (floor)
      // E vai fazer uma desestruturação no resultado que vier no array
      const { source } = images[Math.floor(Math.random() * images.length)]

      // criar um novo elemento de imagem
      const img = document.createElement('img')
      // Adicionar uma classe na imagem
      img.classList = 'image'
      img.src = source

      // Selecionar a div de container
      const container = document.querySelector('div.container')
      // Adicionar no container o elemento de imagem
      container.appendChild(img)
    }
  </script>

Caso queria que não repita a imagem você pode adicionar na função newImage

// vai verificar se essa imagem já esta no container, caso estiver vai cancelar a função
      if(imgExists(source)) return

E Adicionar a função de verificação

  function imgExists(source) {
      const imagens = document.querySelectorAll('img.image')

      for(let image of imagens) {
        if(image.src == source) return true 
      }
    }

Você pode fazer um container para armazenar as imagens lado a lado

<button>Nova imagem</button>

<div class="container"></div>

usando o css e adicionando display flex ou display grid no container você consegue deixar todas as imagens lado a lado

CSS

img.image {
  width: 220px;
  box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px;
  border-radius: 0.5em;
  margin: 15px;
}

div.container {
  display: flex;
  flex-wrap: wrap;
}

button {
  cursor: pointer;
}

E o codigo Javascript para criar novas imagens e adicionar no container

JS:

<script>
    // Quando clicar no botão vai chamar a função de nova imagem
    document.querySelector('button')
      .addEventListener('click', newImage)

    const images = [
      { source: "https://i.ibb.co/xC9r03B/0.jpg" },
      { source: "https://i.ibb.co/hD5gs5R/1.jpg" },
    ]

    function newImage() {
      // Vai gerar um número aleatorio (random) que vai arredondar (floor)
      // E vai fazer uma desestruturação no resultado que vier no array
      const { source } = images[Math.floor(Math.random() * images.length)]

      // criar um novo elemento de imagem
      const img = document.createElement('img')
      // Adicionar uma classe na imagem
      img.classList = 'image'
      img.src = source

      // Selecionar a div de container
      const container = document.querySelector('div.container')
      // Adicionar no container o elemento de imagem
      container.appendChild(img)
    }
  </script>

Você pode fazer um container para armazenar as imagens lado a lado

<button>Nova imagem</button>

<div class="container"></div>

usando o css e adicionando display flex ou display grid no container você consegue deixar todas as imagens lado a lado

CSS

img.image {
  width: 220px;
  box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px;
  border-radius: 0.5em;
  margin: 15px;
}

div.container {
  display: flex;
  flex-wrap: wrap;
}

button {
  cursor: pointer;
}

E o codigo Javascript para criar novas imagens e adicionar no container

JS:

<script>
    // Quando clicar no botão vai chamar a função de nova imagem
    document.querySelector('button')
      .addEventListener('click', newImage)

    const images = [
      { source: "https://i.ibb.co/xC9r03B/0.jpg" },
      { source: "https://i.ibb.co/hD5gs5R/1.jpg" },
    ]

    function newImage() {
      // Vai gerar um número aleatorio (random) que vai arredondar (floor)
      // E vai fazer uma desestruturação no resultado que vier no array
      const { source } = images[Math.floor(Math.random() * images.length)]

      // criar um novo elemento de imagem
      const img = document.createElement('img')
      // Adicionar uma classe na imagem
      img.classList = 'image'
      img.src = source

      // Selecionar a div de container
      const container = document.querySelector('div.container')
      // Adicionar no container o elemento de imagem
      container.appendChild(img)
    }
  </script>

Caso queria que não repita a imagem você pode adicionar na função newImage

// vai verificar se essa imagem já esta no container, caso estiver vai cancelar a função
      if(imgExists(source)) return

E Adicionar a função de verificação

  function imgExists(source) {
      const imagens = document.querySelectorAll('img.image')

      for(let image of imagens) {
        if(image.src == source) return true 
      }
    }
Fonte Link

Você pode fazer um container para armazenar as imagens lado a lado

<button>Nova imagem</button>

<div class="container"></div>

usando o css e adicionando display flex ou display grid no container você consegue deixar todas as imagens lado a lado

CSS

img.image {
  width: 220px;
  box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px;
  border-radius: 0.5em;
  margin: 15px;
}

div.container {
  display: flex;
  flex-wrap: wrap;
}

button {
  cursor: pointer;
}

E o codigo Javascript para criar novas imagens e adicionar no container

JS:

<script>
    // Quando clicar no botão vai chamar a função de nova imagem
    document.querySelector('button')
      .addEventListener('click', newImage)

    const images = [
      { source: "https://i.ibb.co/xC9r03B/0.jpg" },
      { source: "https://i.ibb.co/hD5gs5R/1.jpg" },
    ]

    function newImage() {
      // Vai gerar um número aleatorio (random) que vai arredondar (floor)
      // E vai fazer uma desestruturação no resultado que vier no array
      const { source } = images[Math.floor(Math.random() * images.length)]

      // criar um novo elemento de imagem
      const img = document.createElement('img')
      // Adicionar uma classe na imagem
      img.classList = 'image'
      img.src = source

      // Selecionar a div de container
      const container = document.querySelector('div.container')
      // Adicionar no container o elemento de imagem
      container.appendChild(img)
    }
  </script>