1

¿Cómo puedo hacer que un video que está en la izquierda se alinee con dos lineas de texto uno debajo del otro en HTML y luego, hacerlo también por CSS?

Este es el código que tengo:

.COVID{
    text-align: center;
}
#videocovid{
    text-align: left;
}
#textosalut{
    text-align: right;
}
#videocovid{
  width:100%;
  height: auto;
}
#fotoscovid{
    text-align: right;
}
<section class="COVID">
    <h1> COVID 19</h1>
    <div id="videocovid">
        <video width="600px" controls autoplay>
            <source src="img/Hospital.mp4" type="video/mp4">
            <source src="mov_bbb.ogg" type="video/ogg">
            Your browser does not support HTML5 video.
        </video>
    </div>

    <div id="textosalut">
        <a href="https://canalsalut.gencat.cat/ca/salut-a-z/c/coronavirus-2019-ncov/">Canal Salut Generalitat</a>
    </div>
    <div id="fotoscovid">
        <a href="https://www.flickr.com/photos/hospitalesperitsant/albums/72157713801612566">Recull Fotos Crisis Sanitaria</a>   
    </div>
</section>

4
  • ¿Cuáles son las 2 líneas de texto?
    – user128299
    Commented el 17 feb. 2021 a las 17:59
  • son los div llamados textosalut y fotoscovid Commented el 17 feb. 2021 a las 18:00
  • Yo también publiqué una respuesta de lo que logré entender... Commented el 17 feb. 2021 a las 20:04
  • Muchas Gracias por las respuestas Commented el 17 feb. 2021 a las 22:47

2 respuestas 2

1

Un placer saludarte.

Lo que hice con bootstrap fue esto:

<section class="COVID">
     <div class="row">
          <div class="col-6 col-md-6">
               <h1> COVID 19</h1>
               <div id="videocovid">
                    <video width="600px" controls autoplay>
                        <source src="img/Hospital.mp4" type="video/mp4">
                        <source src="mov_bbb.ogg" type="video/ogg">
                            Your browser does not support HTML5 video.
                        </video>
                    </div>
                    <div id="textosalut">
                         <a href="https://canalsalut.gencat.cat/ca/salut-a-z/c/coronavirus-2019-ncov/">Canal Salut Generalitat</a>
                    </div>
                    <div id="fotoscovid">
                       <a href="https://www.flickr.com/photos/hospitalesperitsant/albums/72157713801612566">Recull Fotos Crisis Sanitaria</a>   
                    </div>
               </div>
               <div class="col-6 col-md-6">
                   <h1>Otra sección</h1>
               </div>
      </div>
 </section>

Y se visualiza así:

introducir la descripción de la imagen aquí

Allí esta sin tu CSS.

Y así lo hice solo con CSS:

<section class="COVID">
      <div class="fila" style="display:flex;">
           <div class="columna_1" style="width:30%">
                <h1> COVID 19</h1>
                <div id="videocovid">
                     <video width="100%" controls autoplay>
                         <source src="img/Hospital.mp4" type="video/mp4">
                         <source src="mov_bbb.ogg" type="video/ogg">
                              Your browser does not support HTML5 video.
                     </video>
                </div>
           <div id="textosalut">
                <a href="https://canalsalut.gencat.cat/ca/salut-a-z/c/coronavirus-2019-ncov/">Canal Salut Generalitat</a>
           </div>
           <div id="fotoscovid">
               <a href="https://www.flickr.com/photos/hospitalesperitsant/albums/72157713801612566">Recull Fotos Crisis Sanitaria</a>   
              </div>
         </div>
         <div class="columna_2" style="width:70%">
              <h1>Otra sección</h1>
         </div>
     </div>
 </section>

Y me quedó así:

introducir la descripción de la imagen aquí

En esta imagen, el video lo pasé de 600px a 100% para que se adapte a la capa que lo contiene la cual la deja al 30% y para el contenido, esa capa la deje al 70%.

Espero te sirva.

Ha sido un placer.

0

Código propuesto:

    <style>
      .covid-contenido {
        display: flex;
        justify-content: space-between;
      }
    </style>

    <section class="COVID">
        <h1> COVID 19</h1>
          <div class="covid-contenido">
            <div id="videocovid">
              <video width="600px" controls autoplay>
                  <source src="img/Hospital.mp4" type="video/mp4">
                  <source src="mov_bbb.ogg" type="video/ogg">
                  Your browser does not support HTML5 video.
              </video>
            </div>

            <div class="textos">
              <div id="textosalut">
                <a href="https://canalsalut.gencat.cat/ca/salut-a-z/c/coronavirus-2019-ncov/">Canal Salut Generalitat</a>
              </div>
              <div id="fotoscovid">
                <a href="https://www.flickr.com/photos/hospitalesperitsant/albums/72157713801612566">Recull Fotos Crisis Sanitaria</a>   
              </div>
            </div>
          </div>
    </section>

Comentarios:

  • Puedes apoyarte de flexbox para conseguir el resultado que buscas
  • Movemos los divs que contienen texto a un div que los agrupe
  • Movemos dentro de un div contenedor tanto al video como al div que contiene a los textos
  • Dejamos por fuera del contenedor de los elementos anteriores a la etiqueta h1
  • Dejar a los textos dentro de un div generará que permanezcan uno abajo del otro

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.