调整大小时保持div在行内

Question

我的目的是将它们保持在同一行中，并在调整窗口大小时缩小它们。它们根本不会缩小，它们只是留出空白空间，并在下面堆叠，就像3-1和3-1，然后是2-2和2-2，然后都在另一个下面。

<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>

Answer 1

试试看，我已经添加了div样式的display:flex

<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>

Answer 2

我使用过引导css样式。

​

.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>

​