j'obtient pas les enfants en utilisant la largeur d'affichage inline-block de la structure suivante:Dans Firefox, conteneur ne
#out {
padding-bottom: 40%;
height: 0;
width: 100%;
position: relative;
}
#in {
position: absolute;
height: 100%;
width: 100%;
}
.container {
height: 100%;
display: inline-block;
}
.image {
height: 100%;
width: auto;
}<div id="out">
<div id="in">
<div class="container"><img src="http://i.imgur.com/sbyPaAsl.jpg" alt="" class="image"></div>
<div class="container"><img src="http://i.imgur.com/sbyPaAsl.jpg" alt="" class="image"></div>
<div class="container"><img src="http://i.imgur.com/sbyPaAsl.jpg" alt="" class="image"></div>
</div>
</div>Fondamentalement, un récipient avec height: 0; et un width et padding-bottom ensemble dans pourcentage (le rembourrage est censé être la valeur exacte pour s'adapter à toutes les images, dans le scénario réel); à l'intérieur d'un conteneur qui hérite de la taille du parent avec position: absolute;; et 3 divs qui devraient flotter l'un à côté de l'autre obtenant sa largeur de chaque image enfants en utilisant display: inline-block; (j'ai essayé aussi float: left; sans résultat). Chrome, Safari et Opera affichent les images de la même manière: .container a la largeur de l'image enfants. Mais dans Firefox (OSX) .container largeur est 0.
Est-ce que je fais quelque chose de mal? Existe-t-il un moyen de faire fonctionner la même chose dans Firefox?
Y a-t-il une question ici? Demandez-vous si vous faites quelque chose de mal ou si c'est un problème avec Firefox? – bugfroggy
Merci @bugfroggy, je vais éditer la question. Eh bien, je veux le faire fonctionner dans Firefox. – Alvaro