1 pièce(s) jointe(s)
Décalage vertical inexpliqué sur un div inline-block
Bonjour,
Je rencontre un problème que n'arrive pas à m'expliquer même en examinant l'élément.
Deux sont divs placés horizontalement par "display : inline-block" (donc un est à gauche et l'autre se situe à droite !).
Je rencontre un décalage vertical inexpliqué sur le div de gauche quie est descendu de plusieurs centimètres !!!
Voici une copie d'écran qui vous permettra de mieux cerner mon problème ainsi que le html et css.
Pièce jointe 331445
html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="general_body">
<div id="produits_gauche">
<div style="font-size:2vw;">Liste</div>
<!-- Les données sont dans datas.js -->
<ul ng-repeat="photo in liste_photos">
<li><a href="{{photo.path}}">{{photo.titre}}</a></li>
</ul>
</div>
<div id="produits_droit">droit</div>
</div> |
CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| #main_ui-view {
padding-left: 5px;
padding-right: 5px;
}
#produits_gauche {
height: 90%;
width: 20%;
display: inline-block;
padding: 5px;
color: #988344;
border-radius: 5px;
border: 1px solid #fffad7;
}
#produits_gauche > ul > li > a {
color: #fffad7;
}
#produits_gauche > ul > li > a:focus,
#produits_gauche > ul > li > a:active {
color: #988344;
}
#produits_gauche > ul > li > a:hover {
color: #c90016;
}
#produits_droit {
height: 90%;
width: 79%;
display: inline-block;
padding: 5px;
color: #988344;
border-radius: 5px;
border: 1px solid #fffad7;
margin-left: 0px;
} |
Merci de bien vouloir m'aider !
