Overflow: hidden n'est pas de travailler avec des images

J'ai ce code CSS:

#portrait{
  height: 300px;
  width: 550px;
  border: solid;
  margin-right: auto;
  margin-left: auto;
  word-wrap:break-word;
  overflow:hidden;
}
.image{
  float:left;
  height: 30%;
  border:solid 1px;
  padding: 1px;
  posit ion:relative;
}

et le code html:

<div id="portrait">
<img class="image" src="http://media.indiatimes.in/media/photogallery/2012/Dec/best_images_of_2012_1355117665_1355117684.jpg"/>
<!--Can't pull all images in here because it thinks my question is spam-->
<img class="image" src="http://adrao.com.sapo.pt/soajo_sol.jpg"/>
<img class="image" src="http://www.befrielsen1945.dk/temaer/internationalt/krigensgang/kilder/ofre.jpg"/>
<img class="image" src="http://ionenewsone.files.wordpress.com/2009/08/oj-simpson-smiling-murder-trial.jpg"/>
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/> 
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/>
</div>

Ce que je veux faire est de faire de l'image de débordement dans l'axe des x cachée (au lieu de la première femme blonde en cours sur la deuxième ligne, je veux qu'elle soit recadrée comme nécessaire, mais tout en restant sur la première rangée, et ainsi de suite). Quand je fais overflow-x caché, ça ne marchera pas. Toute réflexion sur ce que c'est?

Jetez un oeil à Cette Question cela peut vous aider, Vous avez besoin pour rendre vos images flotter à côté de l'autre à l'intérieur d'un div contenant - ici est le violon exemple http://jsfiddle.net/2s95M
jsfiddle.net/j4Ad7
Musa, est-il un autre moyen de le faire, mais y compris les "float:left"? Ty pour vous répondre Wezly mais c'est exactement ce que Moussa a écrit que je suis à la recherche de.

OriginalL'auteur user3050963 | 2013-11-30

  1. 19

    Depuis #portrait n'est pas autorisé à déborder les images alors
    vous avez besoin d'un conteneur supplémentaire avec la largeur spécifiée qui va contenir ces images à l'intérieur.
    De faire comme ceci:

    <div id="portrait">
    <div id="wrapper">
        your images
...

    Et ensuite appliquer

    #wrapper{
    height:30%;
    overflow:hidden;
    width: 1000px; /* it is only important to be bigger then parent for one image width size */
}

.image{
  height: 100%;
    puisque vous voulez des images de flotter, mais ne pas aller dans une autre ligne, vous avez besoin de quelque chose pour les faire tenir ensemble, et ce sera #wrapper, aussi le #wrapper sera plus grand portrait de sorte overflow:hidden de #portrait coupe bien la façon dont vous avez besoin
    Maintenant, C'EST merveilleux! Merci beaucoup!!

    OriginalL'auteur Hrvoje Golcic

  2. 2

    J'ai eu un problème où ma vidéo a disparu lorsque j'ai utilisé débordement caché. Je nécessaire de définir la largeur du conteneur et pas seulement de la hauteur.
    Et je n'ai pas eu à l'utiliser tout de positionnement sur le conteneur.

    OriginalL'auteur Ronen Festinger