1

Imagem 1 Imagem 1


Imagem 2 Imagem 2

Qual propriedade seria recomendada para o conteúdo da página não ficar "vazando"? Nas quais utilizei no código a cima não obtive sucesso. Estou tentando manter este padrão de 3 quadrados por coluna da Imagem 1.

var containerBoxElement = document.querySelector('#app')
    containerBoxElement.style.maxHeight = '570px';
    containerBoxElement.style.minWidth = '1103px';
    containerBoxElement.style.position = 'fixed';
    containerBoxElement.style.float = 'left'

Cada click no botão "Gerar novo" um quadrado é gerado, em que o 4º fica "vazado", onde deveria ir para a próxima coluna.

btnCriar.onclick = function gerarQuadrado() {

        var boxElement = document.createElement("div");
        boxElement.setAttribute("class", "box");
        boxElement.style.width = '180px';
        boxElement.style.height = '180px';
        boxElement.style.margin = '10px';
        boxElement.style.backgroundColor = '#f00';
        containerBoxElement.appendChild(boxElement);
    }
3
  • Você quer esta quantidade definida de acordo com o navegador do usuário? ou seriam sempre 3 quadrados independente do tamanho da tela? Por exemplo, se a tela só der pra desenhar 1 você quer que ele vá para a próxima coluna? Commented 20/09/2019 às 15:59
  • Sim, que ele vá para a próxima coluna e sempre 3 quadrados, independente do tamanho da tela. Commented 20/09/2019 às 16:02
  • Logo utilizei " maxHeight = '570px'; " tamanho para 3 quadrados (180px cada) com o margin de 10px Commented 20/09/2019 às 16:09

1 Resposta 1

2

Cara acho que um container Flex seria o ideal para isso. Aqui tem um exemplo, coloquei a altura do container equivalente a 3 quadrados como vc falou, mais a altura somada das margens. Esse container flex, tem overflow-x auto para não estourar a tela e criar o scroll só no container.

inserir a descrição da imagem aqui

Segue o código da imagem acima:

var btnCriar = document.querySelector('#btnCriar')
btnCriar.style.color = '#fff'
btnCriar.style.fontWeight = 'bold';
btnCriar.style.backgroundColor = '#424242';
btnCriar.style.border = 'solid #ddd';
btnCriar.style.width = '200px';
btnCriar.style.height = '40px';
btnCriar.style.marginLeft = '45%';

function gerarQuadrado() {

    let boxElement = document.createElement("div");
    boxElement.style.width = '180px';
    boxElement.style.height = '180px';
    boxElement.style.margin = '10px';
    boxElement.style.backgroundColor = '#f00';
    boxElement.classList.add('box');

let pai = document.getElementById('app');
pai.appendChild(boxElement);
}

btnCriar.addEventListener('click', gerarQuadrado);
#app {
    height: calc(180px * 3 + 10px * 6);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}
<button class='botao' id='btnCriar'>Gerar novo</button>
<div id="app">
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .