Разрыв строки внутри PHP-скрипта (повторение изображений)
Пытаюсь добавить систему наград на общедоступную страницу профиля. Награды передаются из mySQL в виде изображений. Дело в том, что можно показать максимум 5 наград, и в следующей строке между ней и первой строкой нет пробела. Как его добавить, возможно с <br>, но если что-то другое лучше, то тоже приветствуется!
Я пробовал кое-что <<<EOD , но это стало слишком сложно и не сработало. Пробовал наивный подход, добавляя <br> после эха, но, очевидно, это тоже не сработало. Пробовал увеличивать отступ, тоже не помогло.
<div class = "row">
<?php if (is_array($allawards)) { ?>
<p style = "padding: 10px">
<?php /* To show the image: */ ?>
<?php foreach($allawards as $award) { ?>
<img src = "<?php echo $award->image; ?>"
alt = "<?php echo $award->descrip; ?>">
} ?>
</p>
<?php } ?>
<br/>
</div>
Ответы 2
Это не задача PHP, вам нужно использовать простой CSS.
Маржа-дно?
img {margin-bottom: 5px;}
Margin-top для 6-го и других?
img:nth-child(5) ~ img {margin-top: 5px;}
Это правильный OP, просто нужно отступить от нижнего края или отступа или гребли снизу.
@Daryll: это зависит ... Когда у белого поля отступ внизу 20 пикселей, зазор будет больше, добавляя поля / отступы. Лучшее решение — использовать margin-top для 2-й и других строк.
@Daryll: сравните div в примере jsfiddle.net/La8qx2ny... Первый имеет нижний отступ 40px (20px сам + 20px от изображений), второй 20px, что правильно...
Верно, хотя возможно, что они могли бы использовать margin-bottom, если бы они это сделали :not(:last-child) {margin-bottom: 20px;}, как в jsfiddle.net/m4wd1pxg. Несмотря на это, OP может сделать это с помощью CSS многими способами.
@Daryll: совсем нет... Если в строке будет 3 изображения, вы не можете использовать только :not(:last-child), потому что есть 3 «последних ребенка». Последняя строка может быть неполной (например, всего 2 изображения), адаптивной (иногда 3 изображения в последних строках, иногда 2, иногда 1)... Я использую пример с 1 изображением в строке, ОП запросил 5 изображений в строке. . Ваше решение не очень хорошее, по крайней мере, есть лучшие.
В вашем foreach вы можете увеличить счетчик; после того, как вы эхо, вы можете проверить, находится ли счетчик на пяти, и, если это так, прерваться.
$counter = 1;
foreach
...
echo ...
if ($counter == 5) echo '<br>';
$counter++;
Или вместо того, чтобы исправить это с помощью ручного разрыва, вы можете обратиться к своему стилю, чтобы решить эту проблему немного проще и динамичнее. С помощью CSS-сетка вы можете указать область, состоящую из 5 элементов в ширину, и пробел между строками, сколько вы хотите, между каждым набором из 5 наград, например так:
#awards_container {
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr; //1fr each instead of autos so they're always
the same width
grid-row-gap: 5px;
}
Как и все, что связано с эстетикой: с CSS.