Comment faire des images de la ligne dans une ligne quel que soit le navigateur le niveau de zoom?

Il semble que peu importe ce que je fais, je ne peux pas obtenir une ligne d'images à la ligne à l'horizontale lorsque je zoom dans le navigateur. Quand je zoom, les images les plus à droite se déroulant à la ligne suivante au lieu d'aller hors de l'écran. J'ai essayé float:left;, la création d'une frontière, et position:relative; mais pas de chance.

Si j'utilise position:absolute; il semble que j'ai manuellement la position de chaque image.

Mon but est de faire glisser l'image de la galerie à l'aide de jquery comme celle ici: http://www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/

Je ne veux pas copier le code dans le lien ci-dessus, parce que je veux créer tout à partir de zéro par une compréhension des composantes fondamentales.

OriginalL'auteur user701510 | 2011-06-24

  1. 7

    essayez d'envelopper les images dans un div conteneur largeur de 100%, avec overflow: hidden; cela va arrêter le défilement de la barre qui apparaît, Puis réglez le white-space propriété de la div conteneur à nowrap cela devrait forcer les images de rester sur une ligne, mais le débordement à l'extérieur de votre zone conteneur sera caché vous permettant de script le changement vers la gauche/droite de décalage ou de la marge, vous pouvez prendre de l'affichage d'images inline ou inline-block

    Nate que si il y a aussi le texte de la légende avec ces images de la propriété white-space sera également affecter le texte de sous-titres, de sorte que vous pouvez avoir besoin de réinitialiser toutes les légendes de white-space: normal

    exemple de CSS:

    #container {
width: 500px;
height: 300px;
overflow: hidden;
border: 3px double #000;
white-space: nowrap;
}

#container img {display: inline-block; margin: 0 100px;}

    HTML:

    <div id="container">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
</div>

    OriginalL'auteur clairesuzy

  2. 1

    essayez de créer un div conteneur autour des images avec une largeur fixe, c'est à dire: en px

    <html>
<head>
<title></title>
<style type="text/css">
    #container { width:1100px; }
    img { width:200px; height:100px; margin: 0 10px; float:left; }
</style>
</head>

<body>
<div id="container">
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
</div>
</body>
</html>

    OriginalL'auteur Samuel Liew