Dynamically aligning image

Question

I’m doing an area of the site where I seek to dynamically align the images that will come from possible "customers", the problem that is happening is that I do not know how to break the line because I need 3 images to be next to each other, and after this third image the fourth will come down from the first. Follows my code.

Index:

<div id="middle">
                <div class="row-fluid" id="conteudo">
                    <ul>
                      <li class="min"><div id="miniaturas">
                          <div id="minCli">
                              <img height="157px" src="../imagens/mais.png" id="mais" href=""/>
                              <img height="157px" src="../imagens/ronaldo.jpeg" id="imgFundo" href=""/>
                          </div>
                          </div></li>

                                          <li class="min"><div id="miniaturas">
                          <div id="minCli">
                              <img height="157px" src="../imagens/mais.png" id="mais" href=""/>
                              <img height="157px" src="../imagens/ronaldo.jpeg" id="imgFundo" href=""/>
                          </div>
                        </div></li>

                                          <li class="min"><div id="miniaturas">
                          <div id="minCli">
                              <img height="157px" src="../imagens/mais.png" id="mais" href=""/>
                              <img height="157px" src="../imagens/ronaldo.jpeg" id="imgFundo" href=""/>
                          </div>
                                              </div></li>
                        </ul>
                </div>
                </div>

CSS:

#minCli { width: 229px; height: 171px; background-color: white; }
#miniaturas {   margin-left: 15vw; margin-top: 5vh; }
#mais {   margin-left: -27px; z-index: 2; width: 50px; height: 50px; margin-top: 6vh; position: absolute; }
img#imgFundo {   margin-left: -115px;
  position: absolute;
  width: 229px;
  height: 171px;
  opacity: 0.75;
  -moz-opacity: 0.75;
  filter: alpha(opacity=75);
  -webkit-filter: opacity(0.75);
  filter: gray;
  -webkit-filter: grayscale(100%);
  image-rendering: auto;
  z-index: 1;
}
img#imgFundo:hover { 
 opacity:1;
 -moz-opacity: 1;
 filter: alpha(opacity=100);
 -webkit-filter: opacity(1);
 filter: none; /* Firefox 10+ */
 -webkit-filter: grayscale(0%); /* Chrome 19+ & Safari 6+ */
 image-rendering: auto;
}
.min { display: inline-block; }

Answer 1

The display: inline-block; should do exactly what you’re asking:

li {
  display: inline-block;
}

<ul>
  <li>
    <img src="http://lorempixel.com/200/150/"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/150/"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/150/"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/150/"/>
  </li>
  <li>
    <img src="http://lorempixel.com/200/150/"/>
  </li>
</ul>

---

So this could be indicative of some style preventing the layout from working properly. Try, for example, removing the position: absolute; (or, add position: relative; in the .min).

Another thing that may be causing problems is the use of the same id in different elements. Use a id single for each element, or minCli and miniaturas to be classes. In this case, remember to replace the selector in your CSS (from #id for .classe).