Which property would be recommended for page content not to be "leaking"?

Asked

Viewed 206 times

1

Image 1 Imagem 1

Image 2 Imagem 2

Which property would be recommended for the content of the page not to be "leaked"? Which I used in the code above was not successful. I am trying to keep this pattern of 3 squares per column of Image 1.

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

Each click on the "Generate New" button a square is generated, in which the 4th is "leaked", where it should go to the next column.

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);
    }
javascript css css3

  • Do you want this amount set according to the user’s browser? or would it always be 3 squares independent of the screen size? For example, if the screen can only draw 1 you want it to go to the next column?

  • Yes, let it go to the next column and always 3 squares, regardless of the screen size.

  • Then I used " maxheight = '570px'; "size for 3 squares (180px each) with the margin of 10px

1 answer

2


Dude I think a container Flex would be ideal for this. Here is an example, I put the height of the container equivalent to 3 squares as you said, plus the added height of the margins. This container flex, has overflow-x auto not to pop the screen and create the scroll only in the container.

inserir a descrição da imagem aqui

Follow the image code above:

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>

Browser other questions tagged javascript css css3

You are not signed in. Login or sign up in order to post.