18041 sujets

Questions générales et questions de débutants

Une "width" du body sur mesure ... ?

Je me suis fait une galerie très simple, des images contenues dans des div inline-block, centrée verticalement par rapport à la taille de l'écran, les une à côté des autres.
Donc ma galerie défile horizontalement.

Je ne vois pas comment faire pour que le width de mon body s'adapte au nombre d'images que j'aligne. Là j'ai un width:600% ... ça marche, mais si je rajoute deux images à ma galerie, faut que je modifie ce chiffre.

Bref, je sais que ce width 600% est nul. Mais je ne sais pas comment faire. Il y a bien un moyen pour permettre au flux de "naturellement" se déployer sur le côté droit.

Merci beaucoup d'avance : )
Bonsoir Cymophane,
tu peux utiliser le "white-space: nowrap;"

illustration:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                width: 100%;
                padding: 0;
                margin: 0;
            }
            .bandeau {
                position: relative;
                left: 40%;
                width: 20%;
                border-bottom: solid 2px red;
                border-top: solid 2px red;
                padding: 10px 0 10px 0;
            }
            .galerie {
                white-space: nowrap;
                overflow-x: auto;
            }
        </style>
    </head>
    <body>
        <div class="bandeau">
            <div class="galerie">
                <img src="images/logo-1-50x50-nb.png"/>
                <img src="images/logo-2-50x50-nb.svg"/>
                <img src="images/logo-3-60x60-nb.svg"/>
                <img src="images/logo-4-50x50-nb.png"/>
                <img src="images/logo-5-50x50-nb.svg"/>
                <img src="images/logo-6-60x60-nb.svg"/>
            </div>
        </div>
    </body>
</html>


Bonne nuit
Modifié par GJboba (07 Dec 2017 - 23:37)
Administrateur
Bonjour,

Il devrait également être possible de changer le type d'affichage de body. Par exemple en display: table-cell.
Merci beaucoup !!!

j'ai une petite question d'ordre très formel:

Est-ce que assigner un "nowrap" au body n'est pas très orthodoxe ?
Bien sûr ça ne coûte rien de créer une div à laquelle assigner le nowrap... Je veux juste savoir si "ça se fait" d'assigner ce genre de paramètre au body.


merci d'avance de l'info
et super merci pour le nowrap : )
Merci Raphael ! J'ai essayé display: table-cell dans mon body et ça ne "casse" pas la "barrière" qui bloque le flux vers la droite.
Je connais pas le fonctionnement des différents éléments des tables, parce que j'ai pas eu l'occasion d'en utiliser. Peut-être qu'il y a une solution de ce côté là aussi.

En tout cas merci ! En fait ça me donne envie de travailler avec les tableaux juste pour voir : )

bonne journée !
Sujet clos
Aller à