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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.