Utilisation de display: inline-block

Bonjour,

j'aimerais aligner horizontalement des div.
Pour ce faire, j'ai utilisé la propriété css display: inline-block mais les div sont toujours affichées les unes en dessous des autres.

Voici mon code html :

Code:

---

1 2 3 4 5 6 7 8 9 10

<div class="ui-grid-container"> <div class="ui-grid-a"> <div class="ui-block-a"> <b>Energie consommée</b><br> <b>en 2012</b><br> <span class="txt-large">374</span> kW </div> <div id="graph" class="ui-block-b"></div> </div> <div id="graphChart" class="ui-grid-b"></div> </div>

---

tout ce qui est dans la div ui-grid-container doit être aligné.

au sein de cette div qui utilise 100% de la largeur, j'aimerais que ui-grid-a et ui-grid-b se partagent la largeur (50% pour chaque div).

Au sein de ui-grid-a, j'aimerais que ui-block-a et ui-block-b se partagent la largeur (25% de la largeur totale pour chaque div).

voici mon code css:

Code:

---

1 2 3 4 5 6 7 8

.ui-grid-container { width: 100%; }   .ui-grid-a, .ui-grid-b, .ui-block-a, .ui-block-b { width: 50%; display: inline-block; }

---

malheuresement mes div s'affichent les unes en dessous des autres mais les largeurs sont respectées.

Merci pour votre aide.

Bonjour,
l'inconvénient avec display: inline-block; c'est qu'il crée un espace entre les <div> s'ils ne sont pas accolés au niveau du code (passage à la ligne !).

Il faut modifier comme suit :

Code:

---

1 2 3 4 5 6 7 8

<div class="ui-grid-container"> <div class="ui-grid-a"> <div class="ui-block-a"> <b>Energie consommée</b><br> <b>en 2012</b><br> <span class="txt-large">374</span> kW </div><div id="graph" class="ui-block-b"></div> </div><div id="graphChart" class="ui-grid-b"></div> </div>

---

On retrouve le même comportement avec les images (par ex.) :

Code:

---

1 2	<img src="image1.jpg" alt=""/> <img src="image2.jpg" alt=""/>

---

Code:

---

<img src="image1.jpg" alt=""/><img src="image2.jpg" alt=""/>

---

Le 1er cas affiche un léger espace entre les 2 images.

Bonjour,

je verrais bien une solution avec la propriété display:table;

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

.ui-grid-container { display: table; width: 100%; } .ui-grid-a, .ui-grid-b{ width: 50%; display: table-cell; } .ui-block-a, .ui-block-b{ display: table-cell; width:1%; }

---

http://codepen.io/anon/pen/aBgAq

merci beaucoup pour ta réponse.

J'en reste encore bouche bée ... c'est quand même un drôle de fonctionnement !

je n'aurais jamais trouvé.

Merci encore