FilipeCosta FilipeCosta - 22 days ago 6
HTML Question

Elements not laying out as expected

im trying to build a simple website consuming the flickr api, getting the fotos and the details, and showing the content with bootstrap, but something strange is happening and i dont know how to fix it, my code at the moment is working like this:

enter image description here

in this image, the 4th fotos div should be wrapped in the next row, and not fill the space that is left from the 3th,

here is the effect that i want:

enter image description here

code html:

<div class="row" id="results">

</div>


the container is there to, but i have more things above so its useless to put it here, the important div is there.

code javascript relevant part

var htmlText = "<div class='col-md-4 style='margin-top:200px'><img src =" + src + " width=" + width + " height=" + height + ">" +
"<p><b>título: </b>:" + title + "</p>" + "<p><b>autor: </b>" + owner + "</p>" + "<p><b>data: </b>" + date + "</p>" + "<p><b>local: </b>" + local

for (var i = 0; i < tags.length; i++) {
htmlText += "<label style='border:1px solid grey;margin-left:10px'>" + $(tags[i]).attr('raw') + "</label>";
}

htmlText += "</div>";
$('#results').append(htmlText);


Ps: Sorry for my bad paint skills, and bad english :)

Answer

After every 3rd block, add a block with class="col-xs-12" to force the others on a new row. If you want to have different numbers of columns for different viewports, you can even suppress this behavior by also adding the class visible-md to only go for 3 columns on medium width screens.

In the end your code would become:

var htmlText = "<div class='col-md-4 style='margin-top:200px'><img src =" + src + " width=" + width + " height=" + height + ">" +
"<p><b>título:  </b>:" + title + "</p>" + "<p><b>autor:  </b>" + owner + "</p>" + "<p><b>data:  </b>" + date + "</p>" + "<p><b>local:  </b>" + local

for (var i = 0; i < tags.length; i++) {
    htmlText += "<label style='border:1px solid grey;margin-left:10px'>" + $(tags[i]).attr('raw') + "</label>";
}

htmlText += "</div>";
$('#results').append(htmlText);

if (isThirdBlock) // Determine this somehow
    $('#results').append("<div class='col-xs-12'></div>");