홈>
항목의 listView가 있으며 이러한 항목은 클래스를 기준으로 그룹화되어 상자와 함께 표시됩니다.
5 개 항목이 있다고 가정합니다 :
<div class="1"></div>
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="3"></div>
유사한 항목을 표시하려면 이와 같은 상자가 필요합니다.
클래스가 1 인 ViewModel에 새 항목을 추가하면 상자에서 첫 번째 상자에 새 항목을 추가해야합니다.
같은 클래스를 가진 항목을 그룹화하는 방법과 같은 클래스를 가진 항목에 CSS로 상자를 표시하는 방법을 알려주시겠습니까?
-
답변 # 1
-
답변 # 2
div 안에 추가 요소를 추가 할 수 있다면 항상 이런 식으로 가짜를 만들 수 있습니다. psuedo 요소를 사용하여 비슷한 효과를 얻을 수 있습니다. 필요한 것에 따라 그림자를 사용하여 테두리를 만들 수도 있습니다. :)
CSS
* { font-size: 0; box-sizing: border-box; } [class^="class"] { display: inline-block; width: 20%; background: red; padding: 10px; } .inner { background: blue; font-size: 16px; } .class1 { background: green; } .class3 { background: purple; }
HTML
<div class="class1"><div class="inner">1</div></div> <div class="class1"><div class="inner">1</div></div> <div class="class2"><div class="inner">2</div></div> <div class="class3"><div class="inner">3</div></div> <div class="class3"><div class="inner">3</div></div>
코드 펜
관련 자료
- dplyr - 연도별로 데이터를 그룹화하고 모든 연도에 대해 필터링
- c# - LINQ를 사용하여 항목 그룹화 및 결합
- java - HashMap에서 동일한 키와 값을 찾는 방법
- c# - 객체 목록에서 각 그룹 항목
- typescript - 내 페이지 각도 6에서 이미지를 가져 와서 표시하는 방법
- php - htaccess URL에 카테고리, 하위 카테고리 및 게시물 표시
- yaml - Jekyll에서 변수 변수에 따라 항목을 그룹화 할 수 있습니까?
- javascript - 클릭하면 항목 목록에 점점 더 적은 항목이 표시되지 않습니다
- javascript - 행당 2 행 및 4 항목 표시
- reactjs - 동일한 앱 또는 별도의 사용자 및 관리자
- html - Javascript를 사용하여 동일한 div에 양식 데이터를 표시하는 방법은 무엇입니까?
- javascript - 이미지를 얻는 방법
- jQuery가 데이터를 가져 와서 HTML에 표시
- excel - , 정렬 기준 및 차이점
- javascript - JSON 파일 그룹화 및 필터링
- Java에서 그룹화, 정렬 및 정렬
- javascript - 그룹 D3 전설 아이템
- javascript - 입력 암호 표시 및 숨기기
- ios - UITableViewCell에서 UIImageView 표시 및 숨기기
- sql - 한 행에있는 모든 항목의 총액을 기준으로 그룹화하는 방법
관련 질문
- Javascript/Jquery를 사용하여 CSS 속성을 어떻게 변경하거나 해제합니까?
- jquery - Javascript가 작동하지 않는 여러 Bootstrap Select div 추가
- javascript - JQuery의 ERR_ABORTED 429 (너무 많은 요청)
- javascript - React 17을 webpack 5 및 babel-plugin-react-css-modules (스타일 이름이있는 css 모듈)와 통합
- javascript - 페이지를 새로 고칠 때 Checkbox가 선택 취소되는 것을 중지하는 방법은 무엇입니까?
- html - JavaScript를 사용하여 활성 클래스 교체가 제대로 작동하지 않음
- javascript - Div는 JQuery 숨기기 기능으로 숨기지 않습니다
- javascript - 클릭 한 버튼에 클래스를 추가하고 이전에 클릭 한 버튼에 클래스를 제거하는 방법
- html로 자바 스크립트 인쇄 기능
- html - 입력 필드 빈 유효성 검사가 작동하지 않습니다
일부 jQuery를 사용하여 클래스 이름이 일치하는 모든 요소를 래퍼로 래핑 할 수 있습니다.
그런 다음 CSS를 .wrapper 클래스에 적용하거나 원하는 이름을 지정할 수 있습니다.
여기 코드 펜 예제가 있습니다.