4

Estoy intentando mostrar una variable en pantalla que se debe visualizar en un div diferente según cuál sea su valor. Es decir, tengo dos divs (simulando columnas) y por ejemplo tengo un array de valores 0 o 1. Según sea su valor debe salir en uno u otro div. Tal como lo tengo hecho, me sale algo asíintroducir la descripción de la imagen aquí

Adjunto código

.col1{
	position: relative;
	left: 0px;
	top: 0px;
	width: 22%;
	background-color: red;
	height: 100px;
}
.col2{
	position: relative;
	left: 500px;
	top: 0px;
	width: 22%;
	background-color: yellow;
	height: 100px;
}
$par =[ 0,1, 0 ,2,0,0];
  foreach ($par as $p) {

 if($p == 0){?>
  <div class="col1">
    <?php echo "El valor es: ".$p; ?>
  </div>
  <?php } ?>


  <?php if($p != 0){?>
  <div class="col2">
    <?php echo "El valor es: ".$p; ?>
  </div>
  <?php }

  
  }

Lo que yo quiero es que salga sin mostrar divs intermedios y sin dejar los espacios

Espero que se entienda lo que quiero. Muchas gracias por su ayuda

2 respuestas 2

1

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>

1
  • Funcionó. Muchas gracias
    – Gema
    Commented el 3 sept. 2019 a las 8:25
1

Lo que puedes hacer es crear el html para las dos columnas de esta manera:

<?php
// example code
$par =[ 0,1, 0 ,2,0,0];

$col1 = "";
$col2 = "";
foreach ($par as $p) {

if($p == 0){
 $col1 .= 
  "<div class='col1'>
    El valor es: {$p}
  </div>";
}

if($p != 0){
  $col2 .= 
  "<div class='col2'>
    El valor es:{$p}
  </div>";
 }

}

Ahora puedes utilizar $col1 y $col2 allá donde los necesites:

echo $col1;
.......
echo $col2;

Actualización

El OP comenta:

Gracias por tu respuesta. Así se han eliminado los elementos que salían vacíos pero no coloca las dos columnas en paralelo

A continuación puedes utilizar las dos variables de esta manera:

<section>
<article>
<?php echo $col1; ?>
</article>
<article>
<?php echo $col1; ?>
</article>  
</section>

Lo que resultaría en un HTML así:

section{display:flex; width:100vw;}

[class ^=col]{
  width:45vw;
  margin:1em .5em;
  border:1px solid;
  line-height:100px;
	height: 100px;
  text-align:center;
}
<section>
<article>
<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>
</article>
<article>
<div class='col2'>
    El valor es:1
  </div>
<div class='col2'>
    El valor es:2
</div>
</article>  
</section>

Para colocar las dos columnas en paralelo basta con añadir section{display:flex;} en el CSS. Alternativamente puedes utilizar article{float:left} o article{display:inline-block} u otro método que te guste para poner las dos columnas en paralelo

3
  • Gracias por tu respuesta. Así se han eliminado los elementos que salían vacíos pero no coloca las dos columnas en paralelo
    – Gema
    Commented el 2 sept. 2019 a las 11:55
  • Gracias por tu comentario. He editado mi respuesta. Por favor echale una mirada
    – enxaneta
    Commented el 2 sept. 2019 a las 12:47
  • 1
    Muchas gracias. No lo he logrado del todo de esta forma pero es el camino
    – Gema
    Commented el 3 sept. 2019 a las 8:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.