예제 - html css 책



CSS:예기치 않은 "인라인 블록"요소의 세로 위치 (1)

다음 HTML 코드를 고려하십시오.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>test</title>
    <style>
        .section {
            display: inline-block;
            border: 1px dashed blue;
        }
        .outer {
            border: 1px dashed red;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div style="height: 500px; width: 200px;" class="section">a
        <div style="height: 100px;" class="outer">1A<br />1B</div>
    </div>
    <div style="height: 500px; width: 200px;" class="section">b
        <div style="height: 200px;" class="outer">2</div>
        <div style="height: 200px;" class="outer">3<br />4<br />5</div>
    </div>
</body>
</html>

클래스 ".section"을 가진 div는 모두 동일한 높이이고 인라인 블록이므로, 둘 다 세로로 정렬되어야합니다. 그러나 이러한 div 중 첫 번째는 아래로 밀어 내려져 텍스트 "1B"가 다른 섹션의 텍스트 줄 "5"와 정렬됩니다. 두 div에서 행을 추가하거나 제거하면 첫 번째 섹션의 수직 위치에 직접적인 영향을줍니다.

나는이 논리를 보지 못했고 공식 CSS3 문서에서도 대답을 찾을 수 없다. 크롬 8, 사파리 5, 오페라 9.5 및 파이어 폭스 4 베타에서 동일하기 때문에 그것은 버그 인 것 같지 않습니다 ... 어쨌든 참고가 아니기 때문에 IE는 시도하지 않았습니다.

나는이 현상에 대한 합리적인 설명을 찾고있다. 물론 여러 가지 해결 방법이 있습니다 (예 : 인라인 블록을 인라인 테이블로 변경하여 문제를 해결하거나 정상적인 부동 블록 등을 사용할 수 있음). 그러나 나는이 행동을 이해하려고 노력하고있다.

바라건대 내가 설명 할 수있는 사람보다 더 현명한 누군가가있다.

here 예제를 here .


CSS에서 vertical-align 의 기본값은 baseline 입니다. 이것은 첫 번째 섹션 ( "1B")의 마지막 텍스트의 기준선이 두 번째 섹션 ( "5")의 마지막 텍스트의 기준선과 줄 지어 졌음을 의미합니다. 또한 주변 텍스트의 기준선 어떤.

명시 적 vertical-align: bottom; 을 추가하는 경우 vertical-align: bottom; 그런 다음 .section CSS에 인라인 블록의 하단을 정렬 가이드로 사용하여 원하는 결과를 제공합니다.

인라인 블록에 vertical-align 적용하는 방법에 대한 데모는 http://www.brunildo.org/test/inline-block.html 을 참조하십시오 http://www.brunildo.org/test/inline-block.html





css