Problème css div conteneur et images en float

beconception
Les bases HTML/CSS

Bonjour à tous,

Voila j'ai un souci avec mon code html.

Ce que je fais

J'ai une div conteneur 100%x63px qui contient un lots images aléatoires de 63x63px qui changent au reload de la page.
exemple en image : http://hpics.li/c1ab6cf

Code css

#conteneur 
    padding: 0;
    margin: 0;
    min-width: 100%;
    max-height: 63px;
    overflow: hidden;
    background-color: #000 !important;

 #conteneur  img
   float: left;
   margin: 0;
   padding: 0;

Ce que je veux

Je voudrais que les images couvrent l'ensemble de la div conteneur et que si la dernière image ne couvre pas la totalité de sa largeur elle soit coupée. dans la prolongement de la div conteneur. Comme si j'avais une frise d'image en fond mais avec des images séparées.

Ce que j'obtiens

Actuellement les images remplissent la totalité de la div conteneur, mais la dernière image bascule sous le conteneur et elle est donc masquée, ce qui laisse apparaitre le fond du conteneur.

J'espère que j'ai été assez clair, merci pour vos retours

2 réponses

betaWeb
Réponse acceptée

Salut,

Tu peux remplacer tes images par des div ayant l'image en background, et utiliser les flexbox afin de répartir équitablement tes divs en fonction de l'espace disponible (space-around je crois) ;)

madiodio
Réponse acceptée

Comme l'a dit betaWeb, flexbox réglera sûrement ton problème. Mais tu peux aussi ajouter "white-space: nowrap" à ton #conteneur et mettre tes images en en inline-block et vertical-align middle. Comme ceci:

HTML

<div id="conteneur">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

CSS

#conteneur {
    padding: 0;
    margin: 0;
    min-width: 100%;
    height: 63px;
    overflow: hidden;
    background-color: #fff !important;
    white-space: nowrap
}

#conteneur div {
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100%;
    background-color: #8A9E8E;
    display: inline-block;
    vertical-align: middle;
}

La démo sur jsfiddle : [https://jsfiddle.net/tvdsd6cf/]()