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>

调整大小时保持div对齐

2 个答案: