CSS를 사용하여 요소에 대한 테두리 높이 조정
user1234
CSS를 통해 다음을 달성하려고합니다.
이 라인은 상위 div 내부의 모든 div 컨테이너에 연결됩니다.
HTML :
<div class="parent">
<div class="dynamic">
some content some content some content
some content some contentsome content
some content some content some content
</div>
<div class="dynamic">
other some content other some content other some content
othersome content other some contentsome content
other some content other some content some content
</div>
<div class="child3">
Add more content
</div>
</div>
CSS :
.parent {
border-left: 1px solid #ff0000;
}
.dynamic .child3 {
margin-left: 20px;
background: #e9e9e9;
margin-bottom: 10px;
padding: 10px;
}
이것은 내가 지금까지 가지고있는 것입니다 : https://jsfiddle.net/z6nget91/
그러나 모든 컨테이너에 연결하는 줄을 어떻게 추가 할 수 있는지에 대해 고민하고 있습니까? 어떤 아이디어 ?? 감사
아 조비
::before이를 달성하기 위해 어린이의 의사 요소를 사용할 수 있습니다 . 다음과 같이 시작할 수 있습니다.
.parent {
border-left: 1px solid #ff0000;
}
.child {
position: relative;
margin-left: 20px;
background: #e9e9e9;
margin-bottom: 10px;
padding: 10px;
}
.child::before {
position: absolute;
content: '';
left: -20px;
top: 50%;
border-top: 1px solid #ff0000;
width: 20px;
}
.child:last-child::after {
position: absolute;
content: '';
left: -21px;
top: calc(50% + 1px);
bottom: 0;
border-left: 1px solid #FFFFFF;
}<div class="parent">
<div class="child">
some content some content some content
some content some contentsome content
some content some content some content
</div>
<div class="child">
other some content other some content other some content
othersome content other some contentsome content
other some content other some content some content
</div>
<div class="child">
Add more content
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
조정하기 위해 다양한 데이터 및 바닥 글을 사용하여 내용에 맞게 테두리 크기를 조정하는 방법
- 2
CSS를 사용하여 옵션 요소에 대한 여러 배경 조합을 설정하는 방법
- 3
사용자 정의 논리를 사용하여 용지 입력 컨테이너에 대한 기본값 설정
- 4
하단 테두리를 드래그하여 표 높이 변경 (크기 조정)
- 5
CSS는 높이에 상대적인 테두리 반경을 설정합니다.
- 6
요소의 높이를 뷰포트에서 사용 가능한 높이로 설정 하시겠습니까?
- 7
CSS를 사용하여 선택한 요소 그룹에 위쪽 및 아래쪽 테두리 추가
- 8
mysql에서 하위 쿼리를 사용하여 두 테이블 조인
- 9
경로를 사용하여 요소 스타일에 대한 AngleSharp CSS 쿼리
- 10
JQuery를 사용하여 한 요소의 margin-top을 다른 요소의 높이로 설정
- 11
CSS 테두리를 사용하여 div 사이에 선 그리기
- 12
복잡한 쿼리에서 linq를 사용하여 테이블을 다른 두 테이블에 조인하는 방법은 무엇입니까?
- 13
CSS / JS를 사용하여 특정 요소 뒤에 오는 대상 요소
- 14
원의 테두리에서 사용자 정의 버튼의 높이를 동일하게 얻기 :
- 15
<div> 요소를 사용하여 텍스트 / 테두리를 페이지 중앙에 정렬하려면 어떻게해야합니까?
- 16
CSS를 사용하여 마지막 요소의 테두리를 설정하는 방법은 무엇입니까?
- 17
PHP를 사용하여 MySQL의 두 조인 테이블에서 정보 삭제
- 18
조인을 사용하여 두 테이블에서 단일 쿼리 선택된 요소를 가져 오는 방법
- 19
Flexbox를 사용하여 동일한 높이의 요소가있는 여러 줄 그리드
- 20
Flexbox를 사용하여 동일한 높이의 요소가있는 여러 줄 그리드
- 21
너비 / 높이 비율이 고정 된 경우 순수한 CSS를 사용하여 100 % 너비에 따라 <img> 높이를 설정할 수 있습니까?
- 22
calc ()를 사용하지 않고 ul 높이에서 테두리를 제거하는 CSS 솔루션
- 23
Vue-Split-Panel 및 선택 테두리를 사용하여 Vuetify의 응답성에 대한 CSS 문제
- 24
스타일 구성 요소를 사용하여 반응 선택에서 높이 설정이 예상대로 작동하지 않습니다.
- 25
XSLT를 사용하여 요소의 텍스트 내용에 대한 XML 조작
- 26
CSS-상위 요소를 재정의하기위한 하위 요소의 테두리
- 27
where 절에서 하위 쿼리를 사용하여 테이블에서 두 번째로 높은 날짜 선택
- 28
CSS를 사용하여 위치 절대 요소 너비를 콘텐츠에 맞게 조정
- 29
CSS를 사용하여 최소 높이를 설정하는 방법
몇 마디 만하겠습니다