Перерыв на новую строку после каждой 6-й записи
Я хочу переходить на новую строку после каждой 6-й записи, но она прерывается только после 5-й записи и оставляя 6-ю запись в отдельной строке (см. Рисунок ниже).
for($i = 1; $i < 13; $i++) {
echo '<div style="display: '.($i % 6 == 0 ? '' : 'inline-').'block; padding: 0 10px;"></div>';
}
Что я здесь не так делаю? Как я могу это исправить?
Решение
установить все элементы с display:inline-block и после 6-го элемента добавить:
<div style="clear:both"></div>
проверил его на своем сайте, и это сработало
Другие решения
Вы можете попробовать с 7
echo '<div style="display: '.(($i % 7 == 0) ? '' : 'inline-').'block; padding: 0 10px;"></div>';
Ширина шести облаков (с интервалом), вероятно, больше, чем доступное пространство в облачном контейнере. Проверьте наличие пробелов или увеличьте ширину внешнего контейнера (или уменьшите отступы)
Обычно вы получаете такой результат, это скорее математическая логика:
for($i = 1; $i < 13; $i++) {
echo '<div style="display: '.($i % 7 == 0 ? '' : 'inline-').'block; padding: 0 10px;"></div>'; ^
}
Согласно моему комментарию, ваша логика имеет недостатки, поскольку блочный элемент будет иметь 100% ширину.
Вместо этого уменьшите ширину контейнера и оставьте все элементы как inline-block:
<div id="infopage-prognosis" style="display: block; width:450px">
<?php for($i = 1; $i < 13; $i++) {
echo '<div style="display: inline-block; padding: 0 10px;"></div>';
} ?>
</div>
detector