본문 배경 그라데이션의 너비가 항상 div의 여백과 일치하지 않는 이유가 있습니까

바디 배경을 30.08 % 크림 및 69.2 % 회색으로 설정하고 싶습니다. 나는 CSS 그라디언트로 이것을하고있다. 그렇다면 내 기사를 모두 마진이 남겨 둘 것 : 30.08 %; 배경 선을 만날 수 있습니다 (그래디언트로 작성된 배경 선은 통치자와 같습니다). 다음은이 위대한 작품을 코드본문 배경 그라데이션의 너비가 항상 div의 여백과 일치하지 않는 이유가 있습니까

body{ 
position: relative; 
background: -webkit-linear-gradient(left, #faf4f2, #faf4f2 30.08%, #777777 30.08%, #777777); 
} 
article{ 
    width: 300px; 
    height: 200px; 
    background: red; 
    margin-left:30.08%; 

}

이지만,이 jsFiddle의 예에서 볼 수 있듯이, 기사는 항상 그라데이션 라인과 일치하지 않습니다. 따라서 브라우저 너비에 따라 경우에 따라 엉망이됩니다. jsFiddle 예에서 윈도우 크기를 652px으로 변경하면 문제가 발생합니다 (단점은 아닙니다). 불행하게도, 미디어 쿼리가 그 일을 할 것이라고 생각하지 않는 많은 다른 지점들에서의이 사건.

해결 방법이 있습니까?

감사

출처

2013-03-31 aurel

왜 이러한 부정확 한 비율입니까? – BoltClock

솔직히 말해서 비율이 너무 부정확 한 이유를 기억할 수 없습니다. 그러나 문제는 여전히 다른 백분율 값에 존재할 것이라고 확신합니다. – aurel

당신은 당신의 몸 폭 100 %

When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its container — but only if its container has an explicit width.”

의 높이를 준 다음, 당신은 무엇을

article{ 
margin-left:30.08%; 
}

30.08 %를 사용하고 있습니까? 은 당신이 ... 당신은 여기에 대한 자세한 내용을보실 수 있습니다 only if its container (which in this case is a block level element <body>) has an explicit width.

Read it here

를 사용해야합니다 이상했다 그리고 난 당신의 코드 픽셀 %에서 값을 변경 조금 변경

body{ 
background: -webkit-linear-gradient(left, #faf42, #faf42 90px, #777777 90px, #777777); 

color: darker(#77777, 10%); 
width:300px; height:300px; 
}

지금은 효과가있는 것 같습니다. 값은 데모 목적만을위한 것입니다. 필요에 따라 변경하십시오.

희망이 있습니다.

출처

2013-03-31 10:32:18 GeekyCoder

"무엇의 30.08 %?" 그래서 나는 몸에 100 %를 두어야한다고 생각했습니다. 차이점이 없으므로 본문에서 너비와 높이를 제거했습니다. – aurel

픽셀 단위로 너비와 높이를 변경했으며 배경 그라디언트를 조금 변경하여 현재 작동하고있는 것 같습니다. 내 업데이트 된 답변을 참조하십시오. – GeekyCoder

이 나를 위해 작동하지 않습니다! 이것은 당신의 코드로 결과입니다. http://jsfiddle.net/6BDNR/2/ – aurel

본문 배경 그라데이션의 너비가 항상 div의 여백과 일치하지 않는 이유가 있습니까

답변

관련 문제