28205 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai 3 divs en ligne et un petit souci avec les retours à la ligne dans le code qui génèrent un espace entre les divs.
Si je code "...</div><div>..." pas d'espace
Si je code "...</div>
<div>..." un espace sépare les 2 divs.
Comment placer le plus simplement possible ces divs sans définir des positions absolues pas simples à gérer ?
Voici mon code :

<html><head><title>Divs horizontaux</title>
<style>
.body   { margin: 0px; }
div     { padding: 0; border: 1px solid;  }
.page   { width: 700px; background-color: #eee; }
.gauche { width: 100px; background-color: #bfb; display: inline-block; }
.centre { width: 300px; background-color: #ffb; display: inline-block; }
.droite { width: 200px; background-color: #bbf; display: inline-block; }
</style>
</head><body>
<div class="page">
<div class="gauche">pas d'espace a droite de ce "div"
</div><div class="centre">
espace a droite de ce "div" a cause du retour a la ligne et des espaces entre les balises "div"</div>
<div class="droite">comment faire pour que cet espace ne soit pas lu ? Quelque chose à prevoir dans le style ".page" ?</div>
<div>
</body></html>
Merci casper2 !
Je viens d'essayer :

.page   { height: auto; display: flex; flex-direction: line; }

C'est parfait !
Modifié par chl (11 Apr 2025 - 12:05)
Administrateur
Hello,

"flex-direction: line;" n'existe pas. En l'occurence il n'y en a pas besoin puisque la distribution naturelle dans Flexbox est horizontale.

"height: auto;" ne me semble pas nécessaire non plus puisque c'est la valeur par défaut.