Логическая ошибка при создании сетки DIV с CSS и PHP

0

У меня возникли проблемы с выяснением логики создания сетки с использованием DIV. 3 Столбцы (переменная счетчика $), а затем заполняйте эти столбцы с количеством ящиков. ($ totalBoxes)

Ниже приведен пример того, что я хотел бы выполнить. Изображение 174551

Я попытался использовать логику для повторяющихся областей для таблиц, но я не знаю, работает ли это правильно. Большая часть моего кода выплевывает что-то вроде этого скриншота: Изображение 174551

Может кто-нибудь указать мне, где моя логика неправильная?

CSS

<style type="text/css">
#container {
background-color: #FFC;
height: 750px;
width: 900px;
padding: 5px;
}
#container #column {
background-color: #FC6;
width: 200px;
padding: 5px;
float: left;
margin: 5px;
}
#container #column #box {
background-color: #9C3;
height: 150px;
width: 150px;
margin: 5px;
}
</style>

PHP

<div id="container">
  <?php 
$count = 3;
$totalBoxes = 8;
?>
  <?php for ($i = 1; $i <= $totalBoxes; $i++) {

if ($i % $count == 1){ ?>
<div id="column"> Column <?php echo $i; ?>
<?php } else { ?>
<div id="box"> <?php echo $i; ?> </div>
</div>
<?php } } ?>
</div>
  • 0
    $count количество желаемых столбцов?
  • 0
    Да, это количество столбцов.
Теги:
logic

1 ответ

2
Лучший ответ

У вас есть ошибка в другом потоке, потому что в нем есть два закрывающих div. Также вы не можете повторить id

Я не понимаю, хотите ли вы 3 колонки или 3 строки? Если вам нужны 3 столбца, ваш код не будет работать на totalBoxes mote, чем 9 (он будет totalBoxes больше столбцов).

Я предлагаю вам использовать следующую логику:

<style>
    .column {float: left; padding: 10px; width: 100px; border: solid thin red; background-color: green; margin-right: 5px}
    .box {width: 100%; height: 100px; background-color: white; margin-bottom: 5px; }
</style>
<?php
$boxes_in_column = ceil($totalBoxes / 3);
echo('<div class="column">Column 1');
for ($i = 1; $i <= $totalBoxes; $i++) {
    echo('<div class="box">'.$i.'</div>');
    if (($i % $boxes_in_column) === 0){
        echo('</div><div class="column">Column '.(ceil($i / $boxes_in_column)+1));
    }
}
echo('</div>');
?>

Он будет производить дополнительную пустую колонку, если у вас есть полные коробки, деленные на 3 без остатка. Поэтому попробуйте исправить это самостоятельно.

Изображение 174551

Горизонтальная заливка

<style>
  .box1 {display: inline-block; width: 100px; height: 100px; background-color: white; margin: 5px; }
  .parent {background-color: blue; border: solid thin red; width: 330px}
</style>

<?php
$totalBoxes = 13;

echo '<div class="parent">';
for ($i = 1; $i <= $totalBoxes; $i++) {
    echo('<div class="box1">'.$i.'</div>');
}
echo '</div>';
?>

Изображение 174551

Поделиться
  • 0
    Я хочу 3 колонки. Но я хочу, чтобы заполнить столбцы с любым количеством полей необходимо. Закрывающий div - это совпадающий div для столбца div.
  • 0
    я отредактировал свой ответ и добавил пример кода, это могут быть опечатки, я не проверял его.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню