Как перенести картинки на следующую строку?

Question

[Pavel2345]

Есть таблица, в ней есть картинки по 4 в ряд остальные переносятся на следующую строку и т.д. Раньше все решалось простым оборачиванием в тег , теперь же я все переделал и сделал цикл, добавление через php-функцию, чтобы можно было добавлять новые картинки через админку. Но теперь при добавлении они просто идут в 1 ряд. Может можно как-то задать размер контейнера, чтобы когда им не хватает места они сами автоматически перелезали на следующую строку или разделять по индексу массива (например if ($massive[4]) >= 4 ) {перенести на другую строку}?

Comments

[Ankhena]

Таблица это реально table? Зачем?
Просто выводите подряд img или img в обертках figure.
А потом раскладывайте как хотите флексами или гридами.

[Nikolay Matyushkin]

А таблица у вас, в смысле табличная верстка? Или просто последовательность div-ov выглядящая, как таблица?
Если 1, то у меня для вас неважные новости =)
Если 2, то вам поможет flexbox. Например конкретно так

[Pavel2345]

Ankhena, вот так выглядит код

<tbody>
<tr>





<?php
	$loop = CFS()->get('work_examples');
	foreach ($loop as $row){
		?>


<td align="center" valign="middle"><a href="<?= $row['work_example_img'] ?>" data-gal="prettyPhoto[2]"><img src="<?= $row['work_example_img'] ?>" alt="Процесс монтажа отопления частного дома - дымоходы" width="200" height="150"><br></a></td>


	    <?php
	}
	?>
</tr>
</tbody>

[Ankhena]

Pavel2345,
замените на

<?php
  $loop = CFS()->get('work_examples');
  foreach ($loop as $row){
    ?>
<a href="<?= $row['work_example_img'] ?>" data-gal="prettyPhoto[2]"><img src="<?= $row['work_example_img'] ?>" alt="Процесс монтажа отопления частного дома - дымоходы" width="200" height="150"></a>


      <?php
  }
  ?>

И найдите, где вокруг всего этого table и замените на div или section.

Дальше обертке задаете класс.
А класс стилизуете.
Флексами или гридами, как удобнее.

Таблицами раскладки не делают больше 10 лет.

[Pavel2345]

Ankhena, Спасибо, заработало. Всё оказывается было так просто. Завернул в div

[Модератор]

Pavel2345, Ankhena, поместите найденное решение в ответы и пометьте как решение.

Answer 1

[Ankhena]

Pavel2345,
замените на

<?php
  $loop = CFS()->get('work_examples');
  foreach ($loop as $row){
    ?>
<a href="<?= $row['work_example_img'] ?>" data-gal="prettyPhoto[2]"><img src="<?= $row['work_example_img'] ?>" alt="Процесс монтажа отопления частного дома - дымоходы" width="200" height="150"></a>


      <?php
  }
  ?>

И найдите, где вокруг всего этого table и замените на div или section.

Дальше обертке задаете класс.
А класс стилизуете.
Флексами или гридами, как удобнее.