Блог

Главная - Вопросы по программированию - Сохранение divs в строке при изменении размера

Сохранение divs в строке при изменении размера

#html #css

#HTML #css

Вопрос:

Я намерен сохранить их в одной строке и уменьшить их при изменении размера окна. Они вообще не сжимаются, они просто оставляют пустое пространство и складываются внизу, как 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>

Комментарии:

1. Попробуйте добавить flex:1; в обоих divs

2. Попробовал, к сожалению, не сработало.

3. вы пытались добавить display:flex; в родительский div

4. Извините, это тоже не сработало.

5. Можете ли вы использовать Bootstrap?

Ответ №1:

Попробуйте это, я добавил display:flex в стиле div

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

Ответ №2:

Я использовал стили bootstrap 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>

Комментарии:

1. Однако также существует проблема с укладкой столбцов начальной загрузки друг под другом.

2. @MeansToAnEnd исправлено.

Метки: