CSS 행 클래스는 특정 요소를 프레임 밖으로 내보내는 동시에 정적이고 디스플레이 하단에 고정되어야 합니다.

Question

현재 페이지는 다음과 같습니다. 두 요소가 서로 옆에 있도록 행 클래스를 추가한 후 하단 탐색 모음이 스크롤해야 하는 위치로 푸시됩니다.

여기에서 행 요소가 없는 다른 페이지를 볼 수 있습니다. 탐색 링크가 디스플레이 하단에 완벽하게 고정되어 있습니다(식물과 방 탐색 요소는 알림 탭(이미지 1)에 있어서는 안 되므로 이 요소를 무시하세요 이미지 2). 페이지가 스크롤 가능하고 탐색 모음이 올바른 위치에 유지되지만 요소의 윤곽이 올바르지 않습니다. 모든 녹색 상자 디스플레이는 편집 및 삭제 버튼과 함께 서로 포개져 표시되어야 합니다. 그림 1에 사용된 행 클래스를 사용하여 이 문제를 해결하려고 시도했지만 이로 인해 그림 1의 문제가 발생했습니다.

여기 알림 탭에서 내가 달성하고 싶은 것을 볼 수 있습니다

내 HTML에 행 요소가 있을 때 이 오류를 일으키는 현재 CSS 코드에 어떤 문제가 있는지 궁금합니다.

이 동작을 방지하기 위해 항목을 나란히 표시하는 더 좋은 방법을 알고 계시다면 언제든지 환영입니다.

으아아아

문제를 일으키는 HTML 코드 조각

으아아아

문제가 다른 곳에 있는 경우 탐색 CSS 코드와 함께 전체 HTML 페이지를 포함하겠습니다. 알림 HTML

으아아아

내비게이션 CSS

으으으으

Answer 1

전체 콘텐츠를 div(아래와 같이 90% 너비)에 넣으면 전체 문제가 해결되었습니다.

으아아아