0

tengo unos divs y la imagen no queda al lado del video que es como lo quiero y además la imgagen en vez de salir en la izda. se ha ido a la dcha. además quiero separar un poco la caja de arriba con la de abajo y no hay manera

y que quede responsive (eso creo que si lo hago bien) adjunto mi código, gracias de antemanno!

     .caja {
         width: 100%;
         float: left;
         overflow: hidden;
         text-align: center;
     }
     
     .foto img {
         width: auto;
         height: 100%;
         float: left;
         max-height: 393px;
         overflow: hidden;
     }
     
     .foto{
         display:inline-block;
     }
      .video {
         width: 70%;
         float: left;
         overflow: hidden;
          display:inline-block;
     }
<div class="caja">
   <div class="foto">
       <img src="images/0003fantasia.jpg">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="images/0001-pantallazo.jpg">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>

<div class="caja">
   <div class="foto">
       <img src="images/0012-recorte.jpg">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

4 respuestas 4

0

Lo que tienes que hacer es poner float:left; en el div .foto y no en la imagen, y a ese div darle un width suficientemente pequeño para que quepa al lado del video, como en video tienes 70% he puesto 30% en .foto; también he borrado los float:left; de .caja y .video porque no son necesarios, aquí tienes tu ejemplo con esos cambios:

.caja {
         width: 100%;
         overflow: hidden;
         text-align: center;
     }
         
/* CODIGO AÑADIDO */         
.foto {width:30%;display:inline-block;float:left;}
     
     .foto img {
         width: 100%;
         height: 100%;
         max-height: 393px;
         overflow: hidden;
     }
     
      .video {
         width: 70%;
         overflow: hidden;
         display:inline-block;
     }
<div class="caja">
   <div class="foto">
       <img src="https://picsum.photos/600/480/?random">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="https://picsum.photos/600/480/?random">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>

<div class="caja">
   <div class="foto">
       <img src="https://picsum.photos/600/480/?random">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

2
  • hola Aiub, he probado tu codigo y no funciona. la imagen no queda junta al video y ademas queda deformada. A pesar de ello, gracias por tu tiempo
    – Basicmix
    el 23 jul. 2018 a las 13:56
  • ¿Mi código y el de Carmen los has probado aquí y no ves el resultado que quieres o lo has pegado en tu código? Si lo has pegado en tu código y se te ve mal como te ha dicho Carmen puede que tengas algo en tu código que impida que se vea correctamente, pero si has ejecutado aquí los códigos y no te agrada el resultado si especificas un poco más porque podría editarlo, pero en ambos ejemplos la imagen se ve al lado del vídeo, aunque el tamaño de la imagen no es el ideal, pero eso tendrías que modificarlo en tu código dependiendo del tamaño de tus imágenes. el 23 jul. 2018 a las 19:19
0

Para alinear y que sea responsive no es necesario usar float, ya que tienes los divs colocados en el orden en que quieres que aparezcan lo único que necesitas es indicar que se va a mostrar en línea y aplicar porcentajes que nunca sumen más del 100%.

Para separar entre elementos caja he añadido el margen superior e inferior al elemento con margin.

Y por último la imagen la he alineado verticalmente a la parte superior y le he puesto un ancho máximo del 100% para que en caso de ser grande se vea completa y no quede escondida tras el vídeo. Pero esto dependerá del efecto y posición que quieras para tus imágenes.

.caja {
   width: 100%;
   overflow: hidden;
   text-align: center;
   margin: 20px 0;
}
.caja div {display: inline-block;}
     
.foto { width: 28%; margin-right:1%; vertical-align: top;}
.foto img {
   width: auto; max-width:100%;
   height: 100%;
   max-height: 393px;
   overflow: hidden;
}
     
.video {
   width: 70%;
   overflow: hidden;
}
<div class="caja">
   <div class="foto">
       <img src="https://cdn.pixabay.com/photo/2018/07/19/19/28/the-alps-3549245_960_720.jpg">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="https://cdn.pixabay.com/photo/2018/07/19/19/28/the-alps-3549245_960_720.jpg">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>

<div class="caja">
   <div class="foto">
       <img src="https://cdn.pixabay.com/photo/2018/07/19/19/28/the-alps-3549245_960_720.jpg">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

2
  • hola Carmen, he probado tu codigo y no funciona, aunque la imagen se ve bien, no queda al lado del video y no es responsive, se deforma con tamaños de ventana mas pequeños
    – Basicmix
    el 23 jul. 2018 a las 13:58
  • Debe haber algo más en tu código que afecta a la vista de estos elementos.
    – Carmen
    el 23 jul. 2018 a las 14:25
0

Si quieres alinearlo, puedes usar flexbox, como te recomendaron arriba y para separar las cajas usar margin o padding y tienes varios métodos para que la imagen no se distorsione.

Te dejo 3 ejemplos, revisa todos, pero sobretodo el ultimo que es lo que creo que quieres:

Objet-fit: COVER

.caja {
         width: 100%;
         text-align: center;
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
         margin-bottom: 1em;
     }
     
     .foto, .video{
         display:inline-flex;
         vertical-align: top;
     }
     
     .foto{
         width: 30%;
     }
     
      .video {
         width: 70%;
     }
     
     .foto img {
         width: 100%;
         height: auto;
         max-height: 393px;
         object-fit: cover;
     }
<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/900/450">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/901/451">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
  </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/902/452">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>

Object-fit: contain

.caja {
         width: 100%;
         text-align: center;
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
         padding-bottom: 1em;
     }
     
     .foto, .video{
         display:inline-flex;
         vertical-align: top;
     }
     
     .foto{
         width: 30%;
     }
     
      .video {
         width: 70%;
     }
     
     .foto img {
         width: 100%;
         height: auto;
         max-height: 393px;
         object-fit: contain;
     }
<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/900/450">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/901/451">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
  </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/902/452">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>

Que sea responsive

Depende del resultado que quieres obtener, ahora para el responsive, no se si la mejor manera sea conservar la imagen al lado en moviles por que como ves o se corta o se achica demasiado, lo mejor es usar un media querie que en escritorio se comporte como necesites y en móviles la imagen ocupe todo el ancho o solo la mitad.

.caja {
   width: 100%;
   margin: auto;
   text-align: center;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content:  center;
   padding-bottom: 1em;
 }

 .foto, .video{
   display:inline-flex;
   vertical-align: top;
   width: 100%;
   max-width: 700px;
 }

 .foto img {
   width: 100%;
   height: auto;
   max-height: 393px;
   object-fit: cover;
 }
 
 @media (min-width: 960px){
   .foto{
       width: 30%;
       max-width: initial;
   }

    .video {
       width: 70%;
   }
 }
<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/900/450">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/901/451">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
  </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/902/452">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>

Igual no se si es el mismo efecto responsive que quieres, coloca tu comentario para verificar como sería la mejor opción.

-1

Has probado en usar bootstrap es una libreria que lo hace muy facil el problema que planteas y es muy sencillo de incluir en tu proyecto.

Como implantar bootstrap en tu proyecto:

https://getbootstrap.com/docs/3.3/getting-started/

3
  • no tengo ni idea de bootstrap
    – Basicmix
    el 23 jul. 2018 a las 11:00
  • Editado para que puedas implantarlo
    – solamente
    el 23 jul. 2018 a las 11:02
  • Esto no es una respuesta válida ya que el OP no está utilizando Bootstrap. En todo caso podrías ponerlo como alternativa en un comentario.
    – Kiko_L
    el 23 jul. 2018 a las 11:24

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.