Diferente posición del DIV que contiene texto e imágenes DIV contenedor

Question

Tengo un problema con el delineando de algunos elementos div.

Me dio la siguiente estructura.

<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;
}

Los divs que contienen los elementos de texto (H3 y H4) son un poco más pequeño que los divs que contengan imágenes. No hay margen o material de relleno en cualquier elemento. La altura de todos los divs es el mismo, pero todavía hay algunos espacios en blanco en la parte superior de los divs con la skilllist clase que contiene el texto. No hay ningún espacio en blanco por encima de la div que contiene imágenes. ¿Por qué es esto y cómo puedo solucionarlo?

Ejemplo: Haga clic

Answer 1

trate de añadir vertical-align:top; a su css en todos los artículos desalineados. funcionaba cuando lo hice usando Firebug en la página de prueba.

Answer 2

Hay varias cosas:

• Usted parece estar mal uso de elementos HTML:. h3, h4, etc. son para Titulares de noticias
• Por otro lado, se utiliza demasiados divs. Tenga en cuenta los muchos otros elementos HTML que existe. Por ejemplo, los elementos que llaman "skillist" gritar para ser listas (ol, ul).
• Si usted está preocupado por pequeños espacios de píxel por el estilo, HTML / CSS puede ser la herramienta equivocada para usted. Todo el concepto de HTML / CSS es ser flexible y permitir diferentes representaciones en diferentes sistemas y no para ser una herramienta de diseño perfecto de píxeles.
• El problema puede deberse a que por las imágenes predeterminadas son elementos en línea que se sientan en la línea de base de la fuente y dejar espacio para los descendentes. Pruebe a establecer vertical-align: bottom en las imágenes.

Answer 3

Sin ver el CSS, es difícil de decir.

Hay que recordar que cada elemento tiene un estilo por defecto que proporciona el navegador / estándar. Con el fin de trompeta esto, usted tiene que definir explícitamente sus propios valores.

Por ejemplo, la mayoría de los navegadores definir el color predeterminado de un fondo de página a ser: #FFFFFF

Para cambiarlo, tiene que proporcionar su propio valor.

Espero que esto ayude.

Answer 4

Podría ser hasta los márgenes que los navegadores añaden automáticamente a las etiquetas h (al igual que p y algunas otras etiquetas).

Puede ayudar el uso de una hoja de estilo CSS reset para eliminar una gran cantidad de los márgenes predeterminados y el relleno, que varios navegadores hacen de manera diferente. Hay uno en http://developer.yahoo.com/yui/3/cssreset/

Estoy de acuerdo con tobiasmay - que sería de ayuda si teníamos una página de prueba o algo por el estilo

.

Answer 5

Se puede publicar un poco de CSS o configurar una jsfiddle.net por favor? lo demás es difícil ayudar a solucionar sus divities ..

// editar

aquí tienes, me fijo su margen de beneficio completamente:

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

y el CSS con un trabajo li ul

#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;
}

aquí está el enlace violín: http://jsfiddle.net/tobiasmay/gKrkS/

Answer 6

vertical-align: top o vertical-align: bottom (lo que usted prefiera ) a la regla div.inline. Eso hace que funcione en todos los navegadores.

La razón por la div con las imágenes se coloca un poco más alto que los otros se debe a el camino en línea-bloques están alineados en su caja de línea que contiene :

(...) [B] oxes están dispuestas horizontalmente, uno tras otro, comenzando en la parte superior de un bloque de contención. márgenes horizontales, bordes y relleno se respetan entre estas cajas. (...) El área rectangular que contiene las cajas que forman una línea se llama un caja de línea .

(...)

Una caja de línea es siempre lo suficientemente alto como para todas las cajas que contiene. Sin embargo, puede ser más alto que la caja más alta que contiene (si, por ejemplo, las cajas están alineadas de manera que las líneas de base se alinean). Cuando la altura de una caja B es menor que la altura de la línea de caja que lo contiene, la alineación vertical de B dentro de la caja de línea se determina por la 'vertical-align' .

Tenga en cuenta la parte en negrita. El valor por defecto de vertical-align es baseline. Las imágenes en su ejemplo se mueven en la caja de línea para alinearlos a la línea base del texto que lo rodea. Al hacerlo, aumentan la altura de la caja de línea, dejando algunos espacios en blanco extra en la parte superior de los divs de texto.

Si todavía no entiendo muy bien lo que está pasando, intente aumentar el font-size del h4 en su ejemplo a, por ejemplo, 32px, y retire la height fijo de .skilllist div.