CSS에서 구분선을 사용하여 두 개의 동일한 높이 부동 Div를 만드는 방법은 무엇입니까?

CSS를 사용하여 동일한 높이의 플로팅 Div 만들기

문제: 동일한 높이를 공유하고 다음을 갖는 두 개의 플로팅 div 만들기 의미론적 표를 사용하지 않고 둘 사이를 구분하는 선 이유.

해결책: 이를 달성하려면 다음 CSS 기술을 사용할 수 있습니다.

#container {
  overflow: hidden;
  width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px;
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

설명:

• overflow:hidden을 사용하여 컨테이너에 div를 래핑하면 플로팅 div로 인해 줄 바꿈이 강제로 발생합니다.
• 큰 하단 패딩과 동일한 양의 음수 여백을 div에 적용하면 내용이 세로 중앙에 배치되면서 높이의 100%를 차지하도록 확장됩니다.
• div를 구분하는 선은 div 중 하나에 적용된 작은 여백이나 테두리를 사용하여 생성됩니다.

이 CSS 기술을 활용하면 다음을 만들 수 있습니다. 테이블 사용의 의미론적 의미가 없는 두 개의 동일한 높이 부동 div.

위 내용은 CSS에서 구분선을 사용하여 두 개의 동일한 높이 부동 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!