두 개의 수평 div에 대한 레이아웃 특성

debugcn 에 게시 Dev

레알

두 div를 수평으로 배치하려고 할 때 이상한 동작을 경험했습니다. 나는 파이어 폭스와 크롬 모두에 대해 동일한 동작을 얻었으므로 이해하지 못하는 레이아웃에 대해 더 깊은 것이있을 수 있음을 알았습니다.

내 HTML은 다음과 같습니다.

<div class="parent"><div class="cell left">a</div><div class="cell right">b</div></div>

공백을 피하기 위해 한 줄에 있습니다.

내 CSS는 다음과 같습니다.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.parent {
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0;
  padding: 0;

}

.cell {
  height: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  /* vertical-align: bottom; */ /* toggle this! */
}

.left {
  background-color: lightblue;
  width: 50%;
}

.right {
  background-color: royalblue;
  width: 50%;
}

여기에 jsfiddle 예제를 포함합니다 . 다음은 사진입니다.

현재 코드가 올바르게 작동합니다. 화면 너비가 각각 50 % 인 두 개의 div가 있습니다.

첫 번째 특징 : div에 텍스트 없음

두 div에서 텍스트를 제거하면 첫 번째 문제가 발생합니다. 즉, 내 HTML이 다음과 같으면

<div class="parent"><div class="cell left"></div><div class="cell right"></div></div>

이 경우 세로 스크롤 막대가 표시됩니다. 그림:

두 번째 특징 : 하나의 div에만 텍스트 :

이것은 정말 이상한 일이 일어나는 곳입니다. 다음과 같이 div 중 하나에 만 텍스트가있는 경우 :

<div class="parent"><div class="cell left">a</div><div class="cell right"></div></div>

텍스트가있는 div는 아래쪽으로 밀리고 다른 div는 변경되지 않습니다. 영화:

해결책

나는 (시행 착오에 의해) 추가하면

vertical-align: bottom;

.cell로 모든 것을 수정합니다. 내 문제는 내가 왜 그런지 이해하지 못한다는 것이다. 여기서 무슨 일이 일어나고 있는지에 대한 설명을 듣게되어 기쁩니다.

Alohci

인라인 요소와 상자는 기본적으로 기준선에 수직으로 정렬됩니다. 라인에는 두 개가 아닌 세 개의 인라인 상자가 있습니다.

인라인 블록 요소에 텍스트가 포함 된 경우 해당 기준선은 포함 된 텍스트의 마지막 줄의 기준입니다. 콘텐츠가없는 경우 기준선은 상자의 하단입니다.

줄의 세 번째 상자는 스트럿 이라고합니다 . 그 목적은 선에 최소 높이를 제공하는 것입니다. 너비는 0이지만 포함 블록 글꼴의 텍스트 문자와 같으며 포함 블록에서 정의 된 행 높이를 갖습니다. 항상 기준선에 수직으로 정렬됩니다.

그래서 첫 번째 시나리오는 이것입니다.

두 번째 시나리오는 이것입니다. 스트럿의 하단이 상자 하단 아래에 있는지 확인하여 선의 총 높이가 뷰포트의 100 %보다 커서 스크롤바가 표시되도록합니다.

세 번째 시나리오는 이것입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-8

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사