インラインブロック要素が正しく整列していません

Question 1

内のすべての要素は、.track-container奇妙な余白やパディングなしで与えられた200pxの高さによって制約され、それぞれが並んできれいに並んでいる必要があります。代わりに、前述のフィドルで発生する奇妙さがあります。

何が原因.album-artworkで.track-infoページの途中まで押し込まれ、どうすれば修正できますか？また、テーブルがこのセットアップ全体にアプローチするためのより良い方法である可能性があることを認めますが、この間違いから学ぶことができるように、上記のコードから問題を理解したいと思います。

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

スニペットを展開

これがJSFiddleです。

Question 2

10.8行の高さの計算：「line-height」および「vertical-align」プロパティ

'inline-block'のベースラインは、通常のフローの最後のラインボックスのベースラインです。ただし、インフローラインボックスがない場合、または 'overflow'プロパティに 'visible'以外の計算値がある場合を除きます。この場合、ベースラインは下マージンエッジです。

これは、inline-block要素に関連する一般的な問題です。この場合、vertical-alignプロパティのデフォルト値はbaselineです。値をtopに変更すると、期待どおりに動作します。

更新された例

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

Question 3

内部要素が.track-containerあるインラインレベル同じでボックスラインボックス。

したがって、それらの垂直方向の配置は、vertical-alignプロパティによって指定されます。

このプロパティは、インラインレベルの要素によって生成されたボックスのラインボックス内の垂直位置に影響します。

デフォルトでは、その値はbaseline次のとおりです。

ボックスのベースラインを親ボックスのベースラインに合わせます。ボックスにベースラインがない場合は、下マージンの端を親のベースラインに合わせます。

この場合、それらはすべてベースラインを持っており、それは以下に従って計算されます

'inline-block'のベースラインは、通常のフローの最後のラインボックスのベースラインです。ただし、インフローラインボックスがない場合、または 'overflow'プロパティに 'visible'以外の計算値がある場合を除きます。この場合、ベースラインは下マージンエッジです。

次の画像は、何が起こっているかを明確にしています（赤い線はベースラインです）。

ここに画像の説明を入力してください

したがって、あなたはすることができます

要素の垂直方向の配置をtop、middleまたはに変更します。bottom

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

コードスニペットを表示

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

スニペットを展開

overflow要素のをvisible、たとえばhiddenまたはとは異なるものに設定して、autoそれらのベースラインが下マージンエッジになるようにします。

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

コードスニペットを表示

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

スニペットを展開

要素に流入ラインボックスがないことを確認して、ベースラインが下マージンエッジになるようにします。つまり、コンテンツは流れていないはずです：

要素がフロートされているか、絶対的に配置されているか、ルート要素である場合、要素はフローアウトと呼ばれます。要素が流出していない場合、その要素は流入と呼ばれます。

したがって、たとえば、要素のコンテンツをラッパーに配置し、次のようにスタイルを設定できfloat: leftます。

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

コードスニペットを表示

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

スニペットを展開

Question 4

これらの2つの要素にvertical-align：topを追加する必要があります。

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

jsFiddleの例

デフォルトの垂直方向の配置はベースラインですが、代わりに上を探しています。

Question 5

またはfloat:left;、3つの要素に設定することもできます。

http://jsfiddle.net/fC2nt/

Question 6

位置合わせしようとしているすべての要素の線の高さの比率も同じであることを確認してください。DIV、P、H1-5、DT、DD、INPUT、BUTTONタグを組み合わせて使用している場合、他の場所で定義した内容によっては、垂直方向の配置に不規則性が生じます。