Fluid/Auto-align List of blocks/boxes using css/javascript - html

Question

i made a list of blocks using bootstrap 3.0. but im having problems with the desired outcome. Please help, thanks.
Current outcome
Desired outcome
Custom style from current outcome
.list_comments{
list-style: none;
margin-left:-40px;
}
.list-comment-block{
width:33.33%;
float:left;
padding:5px;
margin-bottom:-15px;
}
Markup
<ul class="list-comments">
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
</ul>
I have tried using position:relative, inherit too. I appreciate any answers

Answer 1

I think it would be easier to get the layout you want using DIV container elements instead of a UL. Then you can use CSS3 column-width to evenly align the thumbnails in a "masonry" style layout..
.list-comments {
-moz-column-width: 25em;
-webkit-column-width: 25em;
-moz-column-gap: .5em;
-webkit-column-gap: .5em;
}
.thumbnail {
display: inline-block;
margin: .5em;
padding: 0;
width:98%;
}
Demo: http://bootply.com/129218