CSS - 부동 소수점 요소가 떨어지는 문제를 해결하는 방법

Question

이 효과를 얻고 싶습니다

근데 현재 코드는 이렇게 쓰여있어요

으아악 으아악

해결 방법을 알려주세요

너비 문제에 대한 답변을 많이 읽었습니다. 너비를 변경한 후 p의 배경 이미지가 완전히 표시되지 않습니다. 너비를 줄이기 위해 사진 크기를 조정하는 방법이 있나요?

Answer 1

처음 두 개의 너비를 더 작게 설정하세요. 아마도 너비가 상위 요소의 최대 너비를 초과하여 줄바꿈이 표시되기 때문일 것입니다

Answer 2

세 개의 하위 요소 너비: 33.333% 여백을 패딩으로 변경하고 백분율을 사용해 보세요.

Answer 3

이유 1: 콘텐츠의 너비 + 여백이 상위 요소의 너비를 초과합니다.
이유 2: 모두 float: 왼쪽, 이 문제가 발생하기 쉽습니다. 일반적으로 두 개가 왼쪽에 있습니다. 왼쪽과 오른쪽에 오른쪽
도움이 되길 바랍니다

Answer 4

CSS 계산에서는 1+1>2인 경우가 많습니다(예: 테두리, 줄바꿈 공백 등). 이를 처리하는 더 좋은 방법은 하위 노드의 너비를 적절하게 줄이는 것입니다.

배경 이미지가 가려지는 문제 p 너비를 수정한 후 배경 이미지의 크기도 동시에 설정해야 합니다(100%). 그렇지 않으면 이미지의 실제 크기에 따라 표시됩니다.

Answer 5

이 속성은 배경 크기:100% 100%;

Answer 6

설정된 너비가 100%를 초과하여 다음 줄로 넘치게 됩니다

Answer 7

p 너비, 배경 크기 제어:포함, 해결됨. 이미지의 가로 세로 비율이 p와 동일하면 이미지가 변형되어서는 안 됩니다.