Skip to main content
3 de 3
se añadieron 1070 caracteres en el cuerpo
Xerif
  • 7.4k
  • 3
  • 19
  • 42

Puedes utilizar grid css para simplificar un poco las cosas, ejemlo (comentarios en el código):

<?php
$par = [0, 1, 0, 2, 0, 0];
// creas variables para almacenar las celdas de cada columna
$column1 = '';
$column2 = '';
// haces el foreach y vas concatenando las celdas
foreach ($par as $p) {
  if($p == 0) {
    $column1 .= '<div class="col1">El valor es: ' . $p . '</div>';
  } else {    
    $column2 .= '<div class="col2">El valor es: ' . $p . '</div>';
  }
}
?>

<!-- Ya solo nos queda mostrarlo -->
<div class="wrapper">
  <div class="column">
    <?= $column1 ?>
  </div>
  <div class="column">
    <?= $column2 ?>
  </div>
</div>

<!-- añadimos el css -->
<style type="text/css">
.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1px;
    background-color: grey;
}
.column > div {
    padding: 1em;
    margin: 1px;
}
.col1 {
    background-color: red;
}
.col2 {
    background-color: yellow;
}
</style>

Resultado:

.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1px;
    background-color: grey;
}
.column > div {
    padding: 1em;
    margin: 1px;
}
.col1 {
    background-color: red;
}
.col2 {
    background-color: yellow;
}
<div class="wrapper">
  <div class="column">
    <div class="col1">El valor es: 0</div>
    <div class="col1">El valor es: 0</div>
    <div class="col1">El valor es: 0</div>
    <div class="col1">El valor es: 0</div>
  </div>
  <div class="column">
    <div class="col2">El valor es: 1</div>
    <div class="col2">El valor es: 2</div>
  </div>
</div>

Xerif
  • 7.4k
  • 3
  • 19
  • 42