내 인라인 블록 요소가 제대로 정렬되지 않습니다.

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'의 기준선은 in-flow line box가 없거나 'overflow'속성에 'visible'이 아닌 다른 계산 된 값이있는 경우를 제외하고 일반 흐름에서 마지막 선 상자의 기준선입니다. 이 경우 기준선은 하단 여백 가장자리입니다.

이것은 inline-block요소 와 관련된 일반적인 문제 입니다. 이 경우 vertical-align속성 의 기본값 은 baseline입니다. 값을로 변경하면 top예상대로 작동합니다.

업데이트 된 예

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

Question 3

내부의 요소가 .track-container있습니다 인라인 (inline-level) 같은에서 상자 줄 상자 .

따라서 수직 정렬은 다음 vertical-align속성에 의해 지정됩니다 .

이 속성은 인라인 수준 요소에 의해 생성 된 상자의 라인 상자 내부의 수직 위치에 영향을줍니다.

기본적으로 값은 baseline다음과 같습니다.

상자의 기준선을 상위 상자의 기준선에 맞 춥니 다. 상자에 기준선이없는 경우 아래쪽 여백 가장자리를 부모의 기준선에 맞 춥니 다.

이 경우 모두 기준선이 있으며 다음과 같이 계산됩니다.

'인라인 블록'의 기준선은 유입 라인 상자가 없거나 '오버 플로우'속성에 '표시'이외의 계산 된 값이있는 경우를 제외하고 일반 흐름에서 마지막 라인 상자의 기준선입니다. 이 경우 기준선은 하단 여백 가장자리입니다.

다음 이미지는 무슨 일이 일어나고 있는지 명확히 보여줍니다 (빨간색 선이 기준선).

여기에 이미지 설명 입력

따라서

요소의 수직 정렬 변경 (예 : 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>

스 니펫 확장

요소에 유입 라인 상자가 없어서 기준선이 아래쪽 여백 가장자리가되도록합니다. 즉, 내용이 흐름을 벗어나야합니다 .

요소가 플로팅, 절대 위치 또는 루트 요소 인 경우 out of flow 가 호출 됩니다 . 요소가 out-of-flow가 아닌 경우 in-flow 라고 합니다.

예를 들어 요소의 내용을 래퍼에 넣고 다음과 같이 스타일을 지정할 수 있습니다 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

이 두 요소에 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 태그를 혼합하여 사용하는 경우 이미 다른 곳에서 정의한 항목에 따라 수직 정렬이 불규칙하게됩니다.