요소 UI의 인접 열 높이를 자동으로 컨텐츠에 적응시키는 방법은 무엇입니까?

요소 UI 레이아웃 : 같은 행에서 인접 열의 일관성이없는 높이 문제를 해결

요소 UI를 사용하여 페이지를 빌드 할 때는 동일한 행 내 인접 열의 높이가 컨텐츠 차이로 인해 자동으로 일치 할 수 없다는 문제를 종종 발생합니다. 이 기사는이 문제를 분석하고 효과적인 솔루션을 제공합니다.

문제 설명

el-row 와 el-col 사용하여 다음 레이아웃을 구축한다고 가정합니다.

<el-row class="row">
  <el-col class="col">
    <span class="label">병행</span>
    <span class="value">더 긴 텍스트 콘텐츠 ...</span>
  </el-col>
  <el-col class="col">
    <span class="label">병렬 처리 ok/ng</span>
    <span class="value">짧은 텍스트</span>
  </el-col>
</el-row>

height: auto; .label 및 .value 의 값이 설정되면 짧은 열의 높이는 el-col 또는 기타 스타일 제한으로 인해 긴 열과 일치하지 않을 수 있습니다.

문제 분석

문제의 근본 원인은 el-col 기본 높이 동작과 상위 요소의 레이아웃에 있습니다. el-col 의 높이는 콘텐츠의 영향을받지 만 부모 요소 ( el-row )의 레이아웃이 하위 요소의 높이의 자동 조정을 제한하면 높이 불일치가 발생합니다.

해결책

열 높이가 컨텐츠에 자동으로 적응하려면 CSS 스타일을 조정해야합니다.

1. el-col 의 높이 제한 제거 : el-col (예 : height: 100%; )에서 명시 적 또는 암시 적 높이 설정을 제거하십시오. el-col 의 높이가 자식 요소 내용을 완전히 결정하게하십시오.

2. el-row 의 레이아웃 조정 : el-row 의 레이아웃으로 인해 하위 요소가 자동으로 확장되도록하십시오. align-items: center; 사용, 제거 또는 align-items: stretch; ( stretch 는 기본값이며 생략 할 수 있습니다). 이를 통해 컨텐츠에 따라 el-col 의 높이가 자동으로 조정 될 수 있습니다.

3. 선택 사항 : 컨텐츠 수직 중심 : 콘텐츠가 세로 중앙에 있어야하는 경우 display: flex; 및 align-items: center; .label 및 .value 에서.

수정 된 CSS 예 :

 .열 {
  국경-바닥 : 솔리드 .0625rem #9c9c9c;
  디스플레이 : Flex;
  /* 정렬 항목 : 스트레치; (기본값, 생략 할 수 있음) */

  .col {
    디스플레이 : Flex;
    플렉스 방향 : 열; /* 라벨과 값이 세로로 배열되어 있는지 확인하십시오*/

    스팬 : NOT (: Last-Child) {
      테두리 오른쪽 : Solid .0625REM #9C9C9C;
    }
    :: v-deep span {
      플렉스 : 1; /* 스팬 높이가 자동으로 확장되도록 허용*/
      단어 브레이크 : 브레이크-alf;
      Word-Wrap : 브레이크 워드;
      /* 높이 : 23px; 고정 높이 제거*/
      /* 라인 높이 : 23px; 고정 라인 높이 제거*/
      텍스트 정렬 : 센터; /* 선택 사항 : 수평 센터*/
    }
    .Label {
      배경색 : #e0e0e0;
      색상 : #000000;
      글꼴 중량 : 대담한;
      높이 : 자동;
      디스플레이 : Flex;
      정렬 구조 : 센터; /* 수직 센터*/
    }
    .값 {
      높이 : 자동;
      디스플레이 : Flex;
      정렬 구조 : 센터; /* 수직 센터*/
    }
  }
}

위의 조정을 통해 el-col 의 높이는 내용에 따라 자동으로 조정되어 동일한 행에서 인접 열의 일관되지 않은 높이 문제를 해결합니다. el-col 높이를 강제로하는 스타일을 제거해야합니다.

위 내용은 요소 UI의 인접 열 높이를 자동으로 컨텐츠에 적응시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!