CODEWITHSUNDEEP
htmlcss
MeansToAnEnd
MeansToAnEnd

Reputation: 25

Keeping divs in-line when resizing

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>

Upvotes: 0

Views: 57

Answers (2)

Marios Nikolaou
Marios Nikolaou

Reputation: 1336

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>

Upvotes: 0

vaku
vaku

Reputation: 712

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>

Upvotes: 1

Related Questions