Aligning image dynamically

Question

Aligning image dynamically

Navigation

#1 by (1 votes)

2

I'm doing an area of the site where I try to dynamically align the images that will come from the possible "clients", the problem that is happening is that I do not know how to break the line because I need to get 3 images side by side, and after this third image the fourth will come below the first. Follow 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; }

html css

asked by anonymous 30.06.2015 / 15:16

1 answer

How to block a form after a certain downtime? Cause form validation in an asp.net mvc 5 link

score 1 · Accepted Answer

display: inline-block; should do exactly what you're asking for:

li {
  display: inline-block;
}

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

So this can be indicative of some style preventing the layout from working correctly. Try, for example, to remove position: absolute; (or, add position: relative; to .min) .

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