0

a ver si podéis echar una mano a un novato. Tengo el siguiente código y necesito hacer lo siguiente:

  1. Colocar el section a la derecha del vídeo, alineado superiormente con el y ocupando el ancho disponible que no ocupe el video. El video tiene un ancho especificado de 300px. El ancho de body no está especificado.

  2. Dentro del article de la section, colocar el span a la derecha de la imagen haciendo que span e imagen estén alineados superiormente.

     <html>
    
     <head>
    
      <title>Prueba</title>
    
    </head>
    
    <body>
    
     <video width="300" height="250" controls poster="prueba-poster.jpg ">
            <source src="prueba.mp4 " type="video/mp4 ">       
        </video>
    
    <section>
        <article>
            <h4>Lorem, ipsum dolor.</h4>
            <img src="prueba.jpg ">
            <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa 
             modi quibusdam nesciunt veritatis error quis dignissimos 
             suscipit</span>
            <a href="# ">Ver más</a>
             </article>
           </section>
         </body>
    </html>
    

Se agradece cualquier ayuda, he probado con float, display:table y vertical-align y aunque creo que los tiros van por ahí, no acabo de ver como lograrlo. Gracias, un saludo! ;)

5
  • El error es que no hay ningún video en tu ejemplo. Saludos. Commented el 11 dic. 2018 a las 18:12
  • arreglado, estaba mal insertado el código. gracias @alacnfcm ;)
    – SamuNieto7
    Commented el 11 dic. 2018 a las 18:21
  • cual sería la relación semántica del vídeo respecto del artículo (<article>)? y de la sección (<section>)? hay mas secciones? algo antes o algo después del par video+section? Commented el 11 dic. 2018 a las 18:28
  • lo de la relación es para ver si englobas todo en un <main> y el video como <aside>. o si lo metes dentro de <section>, un <div> también vale. luego display:inline-block con vertical-align:top (y el implícito text-align:left) haría que se acomode Commented el 11 dic. 2018 a las 18:33
  • el video está fuera de section y no guardan relación. va todo como en el código pero podría usar div para agrupar elementos en caso de que eso facilite la tarea...gracias
    – SamuNieto7
    Commented el 11 dic. 2018 a las 20:10

1 respuesta 1

1

3 opciones, la primera es con display:flex en un contenedor, la segunda explora el por qué usando float no quedan a la misma altura, la tercera es con display:inline-block y unos misteriosos 4px extra.

  1. Podes usar flex, algo así:

.row {
  display: flex;
}

video {
  background: yellow;
}

section {
  background: green;
}

section img {
  vertical-align: top;
  float: left;
}
<html>

<head>

  <title>Prueba</title>

</head>

<body>
  <div class="row">
    <aside>
      <video width="300" height="250" controls poster="https://picsum.photos/300/250/">
        <source src="prueba.mp4 " type="video/mp4 ">       
    </video>
    </aside>
    <section>
      <article>
        <h4>Lorem, ipsum dolor.</h4>
        <img src="https://picsum.photos/200/100/">
        <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa 
         modi quibusdam nesciunt veritatis error quis dignissimos 
         suscipit</span>
        <a href="# ">Ver más</a>
      </article>
    </section>
  </div>
</body>

</html>


  1. Para usar float:left; en el video hay dos opciones:

    • calcular el ancho del section y darle float
    • sólo darle ancho auto y overflow:hidden al section

.row {
  clear: both;
  float: none;
}

video {
  width: 300px;
  float: left;
}

section.uno {
  background: green;
  width: calc( 100% - 300px);
  float: left;
}

section.dos {
  background: yellow;
  width: auto;
  overflow: hidden;
}

section img {
  vertical-align: top;
  float: left;
}
<html>

<head>
  <title>Prueba</title>
</head>

<body>
  <div class="row">
    <video width="300" height="250" controls poster="https://picsum.photos/300/250/">
        <source src="prueba.mp4 " type="video/mp4">
    </video>
    <section class="uno">
      <article>
        <h4>Lorem, ipsum dolor.</h4>
        <img src="https://picsum.photos/120/150/">
        <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa 
         modi quibusdam nesciunt veritatis error quis dignissimos 
         suscipit</span>
        <a href="# ">Ver más</a>
      </article>
    </section>
  </div>

  <div class="row">
    <video width="300" height="250" controls poster="https://picsum.photos/300/250/">
        <source src="prueba.mp4 " type="video/mp4">
    </video>
    <section class="dos">
      <article>
        <h4>Lorem, ipsum dolor.</h4>
        <img src="https://picsum.photos/120/150/">
        <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa 
         modi quibusdam nesciunt veritatis error quis dignissimos 
         suscipit</span>
        <a href="# ">Ver más</a>
      </article>
    </section>
  </div>
</body>

</html>


  1. La idea sugerida en el comentario de usar inline-block y vertical-align:top como en ¿Alinear a la misma altura objetos div inline-block de distintos tamaños?

    no resulta porque se agregan 4px (?) entre el aside y el section, si los restamos en el calc funciona:

aside,
section {
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: auto;
  overflow: hidden;
}

aside {
  width: 300px;
}

section {
  width: calc(100% - 300px - 4px);
}

section img {
  vertical-align: top;
  float: left;
}
<html>

<head>

  <title>Prueba</title>

</head>

<body>
  <div class="row">
    <aside>
      <video width="300" height="250" controls poster="https://picsum.photos/300/250/">
        <source src="prueba.mp4 " type="video/mp4 ">       
    </video>
    </aside>
    <section>
      <article>
        <h4>Lorem, ipsum dolor.</h4>
        <img src="https://picsum.photos/200/100/">
        <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa 
         modi quibusdam nesciunt veritatis error quis dignissimos 
         suscipit</span>
        <a href="# ">Ver más</a>
      </article>
    </section>
  </div>
</body>

</html>

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.