내 인라인 블록 요소가 제대로 정렬되지 않습니다.
내부의 모든 요소 .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 입니다.
10.8 라인 높이 계산 : 'line-height'및 'vertical-align'속성
'인라인 블록'의 기준선은 유입 라인 상자가 없거나 '오버 플로우'속성에 '표시'이외의 계산 된 값이있는 경우를 제외하고 일반 흐름에서 마지막 라인 상자의 기준선입니다. 이 경우 기준선은 하단 여백 가장자리입니다.
이것은 inline-block요소 와 관련된 일반적인 문제 입니다. 이 경우 vertical-align속성 의 기본값 은 baseline입니다. 값을로 변경하면 top예상대로 작동합니다.
.position-data {
vertical-align: top;
}
내부의 요소가 .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>
이 두 요소에 vertical-align : top을 추가해야합니다.
.album-artwork, .track-info {
vertical-align:top;
}
기본 수직 정렬은 기준선이지만 대신 상단을 찾고 있습니다.
또는 float:left;3 개의 요소로 설정할 수 있습니다.
정렬하려는 모든 요소의 선 높이 비율도 동일한 지 확인하십시오. DIV, P, H1-5, DT, DD, INPUT, BUTTON 태그를 혼합하여 사용하는 경우 이미 다른 곳에서 정의한 항목에 따라 수직 정렬이 불규칙하게됩니다.
참고 URL : https://stackoverflow.com/questions/19366401/my-inline-block-elements-are-not-lining-up-properly
'Nice programing' 카테고리의 다른 글
| Java에서 memcpy ()에 해당하는 것이 있습니까? (0) | 2020.10.20 |
|---|---|
| 객체의 자바 스크립트 필터 배열 (0) | 2020.10.20 |
| PostgreSQL에서 제약 이름 업데이트 (0) | 2020.10.20 |
| Google지도 마커에 ID 추가 (0) | 2020.10.20 |
| T-SQL에서 DateTime 필드를 어떻게 업데이트합니까? (0) | 2020.10.20 |