Discussion :

[enzostar]

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.

[Invité]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[rodolphebrd]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[enzostar]

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