0

I have 3 images in a div placed horizontally. When I resize the page the images changes their position and float in a vertical alignment.I want the page responsive and when i resize the page i want that the whole div is adapted and resized. I need also to put in the page others div with others images. I want the images align in the bottom side.Sameone help me please? This is the code example.

.box{
   display: inline-block;
   position: relative;
   bottom:100%;
   width: 100%;
   margin: 5% 5% 0 0;
   font-size: 12px; 
}
.box:before{
   content: "";
   display: block;
   padding-top: 100%; 
} 
img {
   max-width:100%;
   height:auto;
   border:1px solid black;
   text-align:center;
}
.content{
   /* Positioning */
   position:  absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;

   /* Styling */
   border:1px solid;
   padding: 30px;
   text-align: center;
   vertical-align: center;
   text-transform: uppercase;
   color: #fff;
}
<div class="box">
   <div class="content">
      <img src="http://fantapr.altervista.org/paul.jpg" width="350px">
      <img src="http://fantapr.altervista.org/paul.jpg" width="350px">
      <img src="http://fantapr.altervista.org/paul.jpg" width="350px">
   </div>
</div>

strong text

Hunter Turner
  • 6,804
  • 11
  • 41
  • 56
mario
  • 43
  • 1
  • 7

1 Answers1

0

Just add this to the img:

See fiddle https://jsfiddle.net/16q2xr8k/27/

img {
  width: calc((100% / 3) - 2px);
  height: auto;
  border: 1px solid black;
  text-align: center;
}
Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
  • It works! Thank you! If i would like to place it in the bottom of the page? And if i would add other div? thanks – mario Jan 20 '16 at 18:10