Position différente de div est contenant du texte et des images contenant divs

StackOverflow https://stackoverflow.com/questions/4185121

  •  10-10-2019
  •  | 
  •  

Question

Je suis un problème avec le décrivant de certains éléments div.

Je suis la structure suivante. 

<div id="skillcontent">
  <div id="skillname" class="inline">
   <div class="skilllist">
    <div><h3>[SKILL]</h3></div>
    <div><h3>[SKILL]</h3></div>
   </div>
  </div>

  <div id="skillstars" class="inline">
   <div class="skilllist">
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
   </div>
  </div>

  <div id="skillinfo" class="inline">
   <div class="skilllist">
    <div><h4>[YEARS],[LEVEL]</h4></div>
    <div><h4>[YEARS],[LEVEL]</h4></div>
   </div>
  </div>
 </div>

Css: 

.skilllist div {
    padding: 0px;
    margin: 0px;
    display: block;
    height: 25px; /*same height as star images*/
}

div.inline {
    display: inline-block;
}

h3 {
    font-size: 18px;
    color: #5b5b5b;
    margin: 0px;
}

h4 {
    font-size: 18px;
    color: #808080;
    margin: 0px;
}

img {
    vertical-align: bottom;
}

Les divs qui contiennent les éléments de texte (H3 et H4) sont un peu plus petites que les divs qui contiennent des images. Il n'y a pas de marge ou rembourrage sur aucun élément. La hauteur de tous les divs est le même, mais il y a encore quelques espaces au-dessus des divs avec la skilllist de classe qui contiennent du texte. Il n'y a pas d'espace au-dessus de la div contenant des images. Pourquoi est-ce et comment puis-je résoudre ce problème?

Exemple: Cliquez

Était-ce utile?

La solution

essayez d'ajouter vertical-align:top; à votre css sur tous les articles mal alignés. quand je l'ai fait ai travaillé en utilisant ce Firebug sur votre page de test.

Autres conseils

Plusieurs choses:

  • Vous semblez abusant des éléments HTML:. h3, h4, etc. sont pour les titres
  • Par contre, vous utilisez trop de divs. Tenez compte des nombreux autres éléments HTML qui existe. Par exemple, les éléments que vous appelez "skillist" crier pour être des listes (ol, ul).
  • Si vous êtes inquiet au sujet de petits espaces de pixels comme ça, HTML / CSS peut être le mauvais outil pour vous. Le concept de HTML / CSS doit être souple et permettre aux différents rendus sur différents systèmes et de ne pas être un outil de conception parfaite de pixel.
  • Votre problème peut être parce que par défaut les images sont des éléments en ligne qui sont assis sur la ligne de base de la police et de l'espace de congé pour descendeur. Essayez de régler vertical-align: bottom sur les images.

Sans voir votre CSS, il est difficile de dire.

Vous devez vous rappeler que chaque élément a un style par défaut fourni par le navigateur standard /. Pour l'emporter, vous devez définir explicitement vos propres valeurs.

Par exemple, la plupart des navigateurs définissent la couleur par défaut d'un arrière-plan de page à: #FFFFFF

Pour le changer, vous devez fournir votre propre valeur.

Hope this helps.

Il pourrait être en baisse aux marges que les navigateurs ajoutent automatiquement des balises h (ainsi que p et quelques autres balises).

Il peut être utile d'utiliser une feuille de style de réinitialisation pour supprimer un css beaucoup de marges par défaut et le rembourrage qui rendent différents navigateurs différemment. Il y a une http://developer.yahoo.com/yui/3/cssreset/

Je suis d'accord avec tobiasmay - ce serait utile si nous avions une page de démonstration ou quelque chose comme ça

.

peut vous envoyer certains CSS ou mettre en place un jsfiddle.net s'il vous plaît? sinon il est difficile de vous aider à résoudre vos divities ..

// EDIT

ici vous allez, je fixe votre balisage completly: 

<div id="skills">
<div class="skillA">
  <h3 class="skill">Skill A</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
<div class="skillB">
  <h3 class="skill">Skill B</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
</div>

et le CSS avec un travail ul li 

#skills{
background-color:lightgreen;
overflow:auto;
}
.skillA, .skillB{
overflow:auto;
margin-bottom:10px;
}
ul.skillRow{
display: inline;
}
ul.skillRow li{
list-style-type: none;
float:left;
}
p.foo{
float:left;
font-size:18px;
padding:6px;
}
h3.skill{
float:left;
display:inline;
padding:6px;
}

Voici le lien violon: http://jsfiddle.net/tobiasmay/gKrkS/

vertical-align: top ou vertical-align: bottom (selon ce que vous préférez ) à la règle de div.inline. Cela fait fonctionner dans tous les navigateurs.

La raison la div avec les images est positionné un peu plus haut que les autres est due à la manière inline-blocs sont alignés dans leur zone de ligne contenant :

  

(...) [B] oxes sont disposés horizontalement, l'un après l'autre, en commençant par la partie supérieure d'un bloc contenant. marges horizontales, les bordures et le rembourrage sont respectés entre ces boîtes. (...) La zone rectangulaire qui contient les boîtes qui forment une ligne est appelée boîte de ligne .

     

(...)

     

boîte de la ligne A est toujours assez grand pour toutes les boîtes qu'il contient. Cependant, il peut être plus grand que le plus grand boîte qu'il contient (si, par exemple, les boîtes sont alignées de sorte que les lignes de base alignés). Lorsque la hauteur d'une boîte B est inférieure à la hauteur de la ligne boîte contenant, l'alignement vertical de B à l'intérieur de la zone de ligne est déterminée par la

Non affilié à StackOverflow
scroll top