Mis elementos de bloque en línea no se alinean correctamente

Question 1

Todos los elementos dentro .track-containerdeben alinearse bien y en línea, uno al lado del otro, restringidos por la altura de 200px que se les ha dado sin márgenes extraños ni relleno. En cambio, tienes la extrañeza que ocurre en el violín mencionado anteriormente.

¿Qué está causando .album-artworky .track-infopara quedarse relegados mitad de la página, y cómo puedo solucionarlo? Además, reconozco que una tabla puede ser una mejor manera de abordar toda esta configuración, pero quiero resolver el problema del código anterior para poder aprender de este error.

.track-container {
    padding:0;
    width: 600px;
    height: 200px;
    border: 1px solid black;
    list-style-type: none;
    margin-bottom: 10px;
}

.position-data {
    overflow: none;
    display: inline-block;
    width: 12.5%;
    height: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.current-position, .position-movement {
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.album-artwork {
    display: inline-block;
    height: 200px;
    width: 20%;
    border: 1px solid black;
}

.track-info {
    display: inline-block;
    padding-left: 10px;
    height: 200px;
    border: 1px solid black;
}

<div class="track-container">
    <div class="position-data">
        <div class="current-position">1</div>
        <div class="position-movement">2</div>
    </div>
    <div class="album-artwork">fdasfdsa</div>
    <div class="track-info">fdafdsa</div>
</div>

Expandir fragmento

Aquí hay un JSFiddle .

Question 2

10.8 Cálculos de altura de línea: las propiedades 'line-height' y 'vertical-align'

En cuyo caso la línea de base es el borde del margen inferior.

Este es un problema común que involucra inline-blockelementos. En este caso, el valor predeterminado de la vertical-alignpropiedad es baseline. Si cambia el valor a top, se comportará como se esperaba.

Ejemplo actualizado

.position-data {
    vertical-align: top;
}

Question 3

Los elementos del interior .track-containerson cuadros de nivel en línea en el mismo cuadro de línea .

Por lo tanto, su alineación vertical está especificada por la vertical-alignpropiedad:

Esta propiedad afecta el posicionamiento vertical dentro de un cuadro de línea de los cuadros generados por un elemento de nivel en línea.

Por defecto, su valor es baseline:

Alinee la línea de base del cuadro con la línea de base del cuadro principal. Si el cuadro no tiene una línea de base, alinee el borde del margen inferior con la línea de base del padre.

En este caso, todos tienen líneas de base, que se calculan de acuerdo con

La línea de base de un 'bloque en línea' es la línea de base de su último cuadro de línea en el flujo normal, a menos que no tenga cuadros de línea de flujo o si su propiedad de 'desbordamiento' tiene un valor calculado distinto de 'visible', en cuyo caso la línea de base es el borde del margen inferior.

La siguiente imagen aclara lo que está sucediendo (la línea roja es la línea de base):

ingrese la descripción de la imagen aquí

Por lo tanto, puedes

Cambiar la alineación vertical de los elementos, por ejemplo top, a , middleobottom

.track-container > * {
  vertical-align: middle;
}

Mostrar fragmento de código

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * {
  vertical-align: middle;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position">1</div>
    <div class="position-movement">2</div>
  </div>
  <div class="album-artwork">fdasfdsa</div>
  <div class="track-info">fdafdsa</div>
</div>

Expandir fragmento

Establezca el overflowde los elementos en algo diferente a visible, por ejemplo , hiddeno auto, de modo que su línea de base sea el borde del margen inferior.

.track-container > * {
  overflow: hidden;
}

Mostrar fragmento de código

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * {
  overflow: hidden;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position">1</div>
    <div class="position-movement">2</div>
  </div>
  <div class="album-artwork">fdasfdsa</div>
  <div class="track-info">fdafdsa</div>
</div>

Expandir fragmento

Asegúrese de que los elementos no tengan un cuadro de línea de flujo, de modo que su línea de base sea el borde del margen inferior. Es decir, el contenido debe estar fuera de flujo :

Un elemento se llama fuera de flujo si está flotando, posicionado absolutamente o es el elemento raíz. Un elemento se llama en flujo si no está fuera de flujo.

Entonces, por ejemplo, puede colocar el contenido de los elementos en un contenedor y darle estilo con float: left:

.track-container > * > .wrapper {
  float: left;
}

Mostrar fragmento de código

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * > .wrapper {
  float: left;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position wrapper">1</div>
    <div class="position-movement wrapper">2</div>
  </div>
  <div class="album-artwork">
    <span class="wrapper">fdasfdsa</span>
  </div>
  <div class="track-info">
    <span class="wrapper">fdafdsa</span>
  </div>
</div>

Expandir fragmento

Question 4

Debe agregar vertical-align: top a esos dos elementos:

.album-artwork, .track-info {
    vertical-align:top;
}

ejemplo de jsFiddle

La alineación vertical predeterminada es la línea de base, pero está buscando la parte superior.

Question 5

O puede establecer float:left;en 3 elementos.

http://jsfiddle.net/fC2nt/

Question 6

Asegúrese de que la relación de altura de línea en todos los elementos que está tratando de alinear sea la misma también. Si está utilizando una combinación de etiquetas DIV, P, H1-5, DT, DD, INPUT, BUTTON, esto también provocará irregularidades en la alineación vertical dependiendo de lo que ya haya definido en otro lugar.