Layout adjustment with elements that are automatically generated

Question

Layout adjustment with elements that are automatically generated

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

I'm doing a site where one of the pages is responsible for listing user posts in the form of boxes. Each box corresponds to a new user publication, which is generated by code in ASP.NET MVC 4 with Entity Framework 6 automatically, picking up the information from the database. Duplicating the divs in the html and formatting the layout of these divs into css sampling and creating links , all perfect.

But when a new post box is inserted, it goes down from the previous one and I wanted it to stay on the side and go down with css .

I used a tag in css which is float: left , but the div does not get responsive when an element is float , because to keep it responsive I did not set the height, I just set a padding-bottom >.

I wanted to know how I can make the boxes go right side down and down as they are generated automatically and keep responsive to the height of the body of the page?

Example:

html5 css3 asp.net-mvc

asked by anonymous 03.12.2014 / 13:52

2 answers

Synchronize Threads Task with AsyncTask only runs once, then does not arrive on doInBackground

score 1 · Answer 1

This is a rather complex problem involving the application's CSS. This is one of the problems that Bootstrap proposes to solve .

Roughly, what you need to do is the following:

.minha_div_celula {
    width: 33.33333333%;
    float: left;
}

In addition, the% w / w that contains% w / o daughters must have something like:

.div_mae {
    width: 100%;
    float: left;
}

It may be necessary to use% clearfix% to make the browser understand that the <div> daughters are over, and that a new <div> must be generated outside the previous mother-daugh- ter set.

I have a stamp whose website implements exactly what you want to do .

score 1 · Answer 2

A very simple solution would be to put the style overflow: hidden in the element that is the container of the blocks. And for these blocks, use float: left .

See in this example if that's what you want:

var conteiner = document.getElementById("conteiner");
var btn = document.getElementById("btn");
btn.addEventListener("mousedown", function() {
    conteiner.innerHTML += "<div class='bloco'></div>"
});

.bloco {
    width: 50px;
    height: 50px;
    border: 8px solid red;
    float: left;
    margin: 4px;
}
#conteiner {
    overflow: hidden;
    border: 2px solid black;
    width: 240px;
}

button {
  margin: 5px;
}

Clique no botão para adicionar vários blocos sucessivamente.<br/>
<button id="btn">Adicionar novo bloco</button>
<div id="conteiner">
    <div class='bloco'></div>
</div>