Keeping divs in-line when resizing

Asked by At

My intention is to keep them within the same row and have them shrink when I resize the window. They don't shrink at all, they just leave out empty space and stack underneath like 3-1 and 3-1, then 2-2 and 2-2, then all underneath the other.

<div>
  <div style="overflow:auto; width: 100%;">
    <a href="#"><img src="images/image1.png" onmouseover="this.src='images/image1active.png';" onmouseout="this.src='images/image1.png';" style="float: left; max-width: 100%; height: auto; width: auto;"></a>
    <a href="#"><img src="images/image2.png" onmouseover="this.src='images/image2active.png';" onmouseout="this.src='images/image2.png';" style="float: left; max-width: 100%; height: auto; width: auto;"></a>
    <a href="#"><img src="images/image3.png" onmouseover="this.src='images/image3active.png';" onmouseout="this.src='images/image3.png';" style="float: left; max-width: 100%; height: auto; width: auto;"></a>
    <a href="#"><img src="images/image4.png" onmouseover="this.src='images/image4active.png';" onmouseout="this.src='images/image4.png';" style="float: left; max-width: 100%; height: auto; width: auto;"></a>
  </div>
  <div style="overflow:auto; width: 100%;">
    <a href="#"><img src="images/image5.png" onmouseover="this.src='images/image5active.png';" onmouseout="this.src='images/image5.png';" style="float: left; max-width: 100%; height: auto; width: auto;"></a>
    <a href="#"><img src="images/image6.png" onmouseover="this.src='images/image6active.png';" onmouseout="this.src='images/image6.png';" style="float: left; max-width: 100%; height: auto; width: auto;"></a>
    <a href="#"><img src="images/image7.png" onmouseover="this.src='images/image7active.png';" onmouseout="this.src='images/image7.png';" style="float: left; max-width: 100%; height: auto; width: auto;"></a>
    <a href="#"><img src="images/image8.png" onmouseover="this.src='images/image8active.png';" onmouseout="this.src='images/image8.png';" style="float: left; max-width: 100%; height: auto; width: auto;"></a>
  </div>
</div>

2 Answers

1
vaibhav kumar On Best Solutions

Try This, I have added display:flex in div style

<div>
  <div style="overflow:auto; width: 100%;display:flex;">
    <a href="#"><img src="images/image1.png" onmouseover="this.src='images/image1active.png';" onmouseout="this.src='images/image1.png';" style="max-width: 100%;"></a>
    <a href="#"><img src="images/image2.png" onmouseover="this.src='images/image2active.png';" onmouseout="this.src='images/image2.png';" style="max-width: 100%;"></a>
    <a href="#"><img src="images/image3.png" onmouseover="this.src='images/image3active.png';" onmouseout="this.src='images/image3.png';" style="max-width: 100%;"></a>
    <a href="#"><img src="images/image4.png" onmouseover="this.src='images/image4active.png';" onmouseout="this.src='images/image4.png';" style="max-width: 100%;"></a>
  </div>
  <div style="overflow:auto; width: 100%;display:flex;">
    <a href="#"><img src="images/image5.png" onmouseover="this.src='images/image5active.png';" onmouseout="this.src='images/image5.png';" style="max-width: 100%;"></a>
    <a href="#"><img src="images/image6.png" onmouseover="this.src='images/image6active.png';" onmouseout="this.src='images/image6.png';" style="max-width: 100%;"></a>
    <a href="#"><img src="images/image7.png" onmouseover="this.src='images/image7active.png';" onmouseout="this.src='images/image7.png';" style="max-width: 100%;"></a>
    <a href="#"><img src="images/image8.png" onmouseover="this.src='images/image8active.png';" onmouseout="this.src='images/image8.png';" style="max-width: 100%;"></a>
  </div>
</div>
0
Marios Nikolaou On

I have used bootstrap css styles.

.row > div{ border:1px solid red; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
   <div class="row">
     <div class="col-4">
       <img src="" class="img-responsive" /> 
    </div>
  <div class="col-4">
     <img src="" class="img-responsive" />
  </div>
  <div class="col-4">
    <img src="" class="img-responsive" />
  </div>
   </div>
 </div>