-
css 블록 height 지정 팁기타 2023. 4. 12. 10:13
- 위의 그림에 수정 , 삭제 버튼은 같은 제목이나 content와 같은 폼 태그 내부에 있으면서도,
오른쪽 정렬을 위해 float : right 를 줬더니 form 태그 밖으로 벗어났다.
이런 경우는 absolute나 float 처럼 블록이 같은 z 축 위에서 뜨는 속성을 줄 경우, 해당 요소를 포함하는 div가 높이 값을 가지지 못하기 때문이다.
- 보이는 것과 같이 detail-btn-box 내부에는 detail-btn-box-right 가 있고, 그 안에 수정, 삭제 버튼이 있다.
하지만, detail-btn-box-right 가 float 이기 때문에, detail-btn-box 는 높이값을 잃어버렸다.
이 때 다음과 같은 설정을 해줌으로서 이를 방지할 수 있다.
#detail-btn-box:after{ clear:both; }
이 css를 적용시키면
- 다음과 같이 detail-btn-box 이 height value를 가지게 된다
** css의 :before 와 :after에 대한 추가적인 공부, 정리가 필요할 것 같다
'기타' 카테고리의 다른 글
게시판 번호 설정 (SelectKey 지정 에러) (0) 2023.04.14 변수에 null 값이 들어갈 때 생기는 오류 ( java.lang.NumberFormatException ) (0) 2023.04.12 링크 모음 (0) 2023.04.06 HTTP 상태 415 – 지원되지 않는 Media Type (0) 2023.04.05 controller 미 설정 ( HTTP 상태 404 ) (0) 2023.04.05