0

Tengo la siguiente estructura HTML:

<section class="row my-4">
  <!--Lista individual-->

  <section class="col" style="background-color: pink;">
    <!--Bloque izquierdo con la información de la lista-->

    <div class="ow">
      <!--Puesto en la clasificación, nombre y descripción de la lista, subestilos y sistema de votación-->

      <div class="mr-3"><span class="numero" data-contador="<?=$contador?>"><?=$contador?></span></div>
      <!--Puesto en la clasificación-->

      <div class="col">
        <!--Resto-->

        <div class="row"><span class="font-italic"><?=$nombre_lista?></span>&nbspde&nbsp<span class="font-weight-bold"><?=$nombre_usuario?></span><a class="copiar-enlace-yt icono" title="Copiar enlace al portapapeles" data-url-yt="<?=$enlace_lista_yt?>"><span>K<span></a>
          <!--Botón para copiar el enlace de la lista-->
        </div>

        <div class="descripcion-lista row"><span><?=$descripcion?></span></div>

        <div class="row">
          <!--Estilos y subestilos-->

          <a class="boton-subestilo badge badge-info mr-2"><span style="color: white;"><?=$estilo_dominante?></span></a>

          <?php foreach($subestilos_top3 as $clave => $subestilo): ?>

          <a class="boton-subestilo badge badge-info mr-1"><span style="color: white;"><?=$subestilo?></span></a>

          <?php endforeach; ?>

        </div>

        <div class="mt-3 row">
          <!--Sistema de votación-->

          <span class="estrellas mr-2"> <!--Estrellas-->
    
                            <?php if($_SESSION['conectado']): ?> <!--Si el usuario está conectado-->
    
                                <?php for($i = 1; $i <= 5; $i++): ?> <!--Se crea un radiobotón de 5 unidades-->
    
                                    <input class="votar-lista" type="radio" name="<?=$id_lista?>" value="<?=$i?>" <?= ($i == $nota_lista) ? 'checked data-actual="true"' : 'data-actual="false"'; ?>><i></i> <!--Todos identificados por el id de la lista pero cada uno con un valor de 1 a 5; si el valor equivale a la $nota que está registrada en la BD, el radiobotón aparece marcado y con el data-actual con valor verdadero; de lo contrario, no aparece marcado y el data-actual será falso-->
    
                                <?php endfor; ?>
    
                            <?php endif; ?>
                                
                        </span>

          <span class="nota-media badge badge-pill badge-warning mr-2"><?=$nota_media_lista?></span>
          <!--Nota media-->

          <span style="transform: translateY(2px);"><span class="font-weight-bold"><?=$votos_lista?> </span>
          <?=$coletilla?>
            </span>
            <!--Número de votos-->

        </div>

      </div>

    </div>

    <div class="text-right mt-auto" style="background-color: coral;">
      <!--Información sobre la canción más popular de la lista-->

      <div class="cancion-popular">La canción más popular de la lista...</div>

      <form method="post" action="<?=url_base?>recopilatorios/indice">
        <!--Título, autor y año-->

        <span class="font-italic"><?=$cancion_popular['titulo_cancion']?></span>&nbspde&nbsp<span class="font-weight-bold"><?=$cancion_popular['nombre_autor']?></span></span>&nbsp(<button class="boton-enlace" role="link" name="recopilatorio" value="<?=$cancion_popular['ano']?>"><?=$cancion_popular['ano']?></button>)</span>

      </form>

    </div>

  </section>

  <section class="col">
    <!--Bloque derecho con el vídeo correspondiente a la canción más popular-->

    <div class="row contenedor-youtube"><iframe class="youtube" width="575" height="323.5" src="<?=$cancion_popular['enlace_youtube']?>" allowfullscreen></iframe></div>
    <!--Vídeo de YouTube-->

  </section>

</section>

¿Cómo podría conseguir que la caja coral se dispusiera abajo del todo de la caja rosa sin trampear el código con margin-top?

introducir la descripción de la imagen aquí

Aclaro que esta estructura se repite 15 veces por página (ésta en concreto aparece en quinta posición).

1 respuesta 1

1

Por defecto, un div se inserta debajo del otro. Sin embargo, pueden existir propiedades css que alteren el comportamiento por defecto como margin, padding o cualquier otra.

Si es tu caso, puedes usar las propiedades position: absolute; y bottom: 0px; en el div color coral. No puedo reproducir tu caso exacto ya que no nos compartes el código css.

<section class="col" style="background-color: pink;">
  <div class="ow">
    <p>A falta de tu css</p>
    <p>Uso datos de prueba</p>
    <p>Para llenar espacios</p>
    <p>Y ubicar...</p>
  </div>
  <div class="text-right mt-auto" style="background-color: coral;">
    <p>En la posición bottom</p>
    <div class="cancion-popular">La canción más popular de la lista...</div>
  </div>
</section>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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