Comment mettre deux iframes côte à côte

J'ai essayé plusieurs codes, comme celui-ci:

<div class="box"> <iframe src="https://embed.spotify.com/?uri=spotify:user:1290230929:playlist:6nTIVNGZfnZ4urUiwHIgpT" frameborder="0" scrolling="no" width="100%" height="512" align="left"> </iframe> </div> <div class="box"> <iframe src="https://embed.spotify.com/?uri=spotify:user:1285279066:playlist:56KI83cMiMTOocIdXq2R5j" frameborder="0" scrolling="no" width="100%" height="512" align="right"> </iframe> 

Et cela ne fonctionne pas côte à côte, si quelqu'un peut me résoudre, merci.

Voici. Utilisez float dans div ceci est basique, veuillez utiliser la recherche avant de poster la prochaine fois.

HTML:

 <div class="box"><iframe src="https://embed.spotify.com/?uri=spotify:user:1290230929:playlist:6nTIVNGZfnZ4urUiwHIgpT" frameborder="0" scrolling="no" width="100%" height="512" align="left"> </iframe> </div> <div class="box"> <iframe src="https://embed.spotify.com/?uri=spotify:user:1285279066:playlist:56KI83cMiMTOocIdXq2R5j" frameborder="0" scrolling="no" width="100%" height="512" align="right"> </iframe> 

CSS:

 .box{ float:left; margin-right:20px; } .clear{ clear:both; } 

http://jsfiddle.net/E5WFT/

1. Supprimez la width="100%" des iframes.

2. Changez align="right" pour align="left" sur le second iframe si vous le souhaitez complètement côte à côte.

3. Ajoutez ce CSS:

 .box { display:inline-block; } 

DEMO

Des problèmes sont ici:

Entrez la description de l'image ici

Pourquoi la width 100%? Et pourquoi dans div ? (De cette façon, ils ne seront jamais côte à côte :-))

Essaye ça :

http://jsbin.com/hirirazu/3/edit

Entrez la description de l'image ici

Il ne peut pas fonctionner où la largeur est de 100%, car cela indique que la largeur de l'iframe est à 100% du corps. De plus, n'utilisez pas les styles en ligne si possible car beaucoup d'entre eux sont ou seront obsolètes.