CSS를 사용하여 동일한 크기의 항목으로 레이아웃을 만들려면 어떻게 해야 합니까?

CSS를 사용하여 동일한 크기의 항목으로 레이아웃 만들기

목표는 각 항목의 너비가 가장 넓은 것과 동일한 레이아웃을 얻는 것입니다. 내용과 상관없이 요소입니다. 이 레이아웃은 여러 줄을 가질 수 있으며 이에 따라 항목을 줄 바꿈할 수 있습니다.

JavaScript 사용

제공된 예에서 볼 수 있듯이 JavaScript는 줄 사이의 최대 너비를 계산하여 이 작업을 쉽게 수행할 수 있습니다. 그런 다음 해당 너비를 모든 요소에 할당합니다.

CSS로 동일한 레이아웃 달성

또한 자바스크립트가 필요합니다. 방법은 다음과 같습니다.

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

이 CSS는 다음 스타일을 적용합니다.

• .list-container는 목록을 래핑하는 컨테이너 역할을 합니다.
• . list는 항목을 세로로 표시하는 역할을 담당합니다.
• .list-item은 각 개별 항목에 스타일을 적용합니다.

flex-wrap 속성을 Wrap으로 설정하고 justify-를 지정하여 .list-item 내의 flex-start 콘텐츠를 사용하면 항목이 줄 시작 부분까지 정렬을 유지하면서 필요할 때 새 줄로 줄바꿈되도록 합니다.

위 내용은 CSS를 사용하여 동일한 크기의 항목으로 레이아웃을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!