0

A ver tengo una especie de blog con un prototipo de divs fijos, y quiero que se alineen todos para que así quede un tipo blog con cada entrada de un tamaño y los cuadrados naranjas de publicidad. Alguien sabría como hacerlo? Quería eliminar los espacios señalados con azul para que las imágenes suban

<!-- Blog -->
<section id="blog">
    <?php
    $entrada = new Entrada();
    $entrada->get();
    $datos = $entrada->get_rows();
    $tamañoCompleto = count($datos);
    $datos = array_reverse($datos);
    $contador = 1;
    if ($datos) { ?>
        <div class="contenedor-blog">
            <?php if (!isset($_GET['entrada'])) { ?>
                <!--  Contenedor miniaturas -->
                <div class="contenedor-miniaturas">
                    <?php foreach ($datos as $key => $entrada) {
                        if ($contador == 2 || $contador == 7) { ?>
                            <div class='miniatura-entrada-anuncio'>
                                <div></div>
                            </div>
                        <?php }
                        if ($contador == 1 || $contador == 4 || $contador == 5) { ?>
                            <div class='miniatura-entrada-big insertar-miniatura-entrada' data-insertar-miniatura-entrada='<?php echo $entrada['imagen']; ?>'>
                            </div>
                        <?php }
                        if ($contador == 6 ||  $contador == 9) { ?>
                            <div class='miniatura-entrada-medium insertar-miniatura-entrada' data-insertar-miniatura-entrada='<?php echo $entrada['imagen']; ?>'>
                            </div>
                        <?php }
                        if ($contador == 3 || $contador == 8) { ?>
                            <div class='miniatura-entrada-small insertar-miniatura-entrada' data-insertar-miniatura-entrada='<?php echo $entrada['imagen']; ?>'>
                            </div>
                        <?php } ?>
                    <?php $contador++;
                    } ?>
                </div>
                <div class="botonSiguienteAnterior">
                    <button class="secondary-btn">Anterior</button><button class="secondary-btn">Siguiente</button>
                </div>
            <?php } ?>

La imágen

2
  • 2
    Hola, ¿podrías añadir tu html para ver como lo tienes hecho? el 7 may. 2020 a las 9:57
  • 2
    Bienvenido, es importante realizar preguntas en base a el documento Cómo preguntar, te sugerimos editar tu pregunta y agregar lo que has tratado o investigado. No olvides realizar el recorrido del sitio para conocer su funcionamiento básico, saludos. el 7 may. 2020 a las 10:16

1 respuesta 1

0

Debes darle la altura que necesitas a través del css aprovechando algunas de las clases ya existentes en tu código o creando una concreta para esta necesidad de tu código. En este caso yo he optado por la primera opción como verás en el código css* que comparto abajo, siempre entendiendo que el contenedor de cada una de esas imágenes ya tiene un alto definido. He añadido tres supuestos, en el primero se da el alto a las imágenes que cargan dentro del div, y en el segundo, suponiendo que cargues dichas imágenes como un background, diciéndole que ocupe todo el espacio disponible con la propiedad background-size: cover. Por último, si estás haciendo tu proyecto usando flexbox, en ese caso lo que debe contener es la propiedad strech la clase css del contenedor.

.contenedor-miniaturas .insertar-miniatura-entrada img {
min-height:100%; /*o en su defecto el número de píxeles que concreto que se necesite*/
}
/*o en caso de que se trate de un background*/
.contenedor-miniaturas .insertar-miniatura-entrada {
background-size: cover;
}
/*en caso de utilizar flexbox*/
.contenedor-miniaturas {align-items: stretch}
<section id="blog">
    <?php
    $entrada = new Entrada();
    $entrada->get();
    $datos = $entrada->get_rows();
    $tamañoCompleto = count($datos);
    $datos = array_reverse($datos);
    $contador = 1;
    if ($datos) { ?>
        <div class="contenedor-blog">
            <?php if (!isset($_GET['entrada'])) { ?>
                <!--  Contenedor miniaturas -->
                <div class="contenedor-miniaturas">
                    <?php foreach ($datos as $key => $entrada) {
                        if ($contador == 2 || $contador == 7) { ?>
                            <div class='miniatura-entrada-anuncio'>
                                <div></div>
                            </div>
                        <?php }
                        if ($contador == 1 || $contador == 4 || $contador == 5) { ?>
                            <div class='miniatura-entrada-big insertar-miniatura-entrada' data-insertar-miniatura-entrada='<?php echo $entrada['imagen']; ?>'>
                            </div>
                        <?php }
                        if ($contador == 6 ||  $contador == 9) { ?>
                            <div class='miniatura-entrada-medium insertar-miniatura-entrada' data-insertar-miniatura-entrada='<?php echo $entrada['imagen']; ?>'>
                            </div>
                        <?php }
                        if ($contador == 3 || $contador == 8) { ?>
                            <div class='miniatura-entrada-small insertar-miniatura-entrada' data-insertar-miniatura-entrada='<?php echo $entrada['imagen']; ?>'>
                            </div>
                        <?php } ?>
                    <?php $contador++;
                    } ?>
                </div>
                <div class="botonSiguienteAnterior">
                    <button class="secondary-btn">Anterior</button><button class="secondary-btn">Siguiente</button>
                </div>
            <?php } ?>

En cualquier caso, si compartes el css que estás aplicando será más fácil dar una solución más detallada y ajustada a las necesidades de tu proyecto

Tu Respuesta

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

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