웹 사이트의 응답 성을 높이기 위해 요소를 유동적으로 정의하는 방법을 배우려고합니다. 오늘 나는 마침내 해결 된 상황을 보았지만, 왜 그 수정이 효과가 있었는지 이해할 수 없었습니다.동일한 요소에 반응하는 웹 디자인의 상대 너비 및 패딩
I 사이트 (NDA)에 링크 할 수 없습니다,하지만 난 문제의 요소와 일부 샘플 페이지에 올려했습니다
이잘못된 : http://cruxwire.com/wrong.html 가 RIGHT : http://cruxwire.com/right.html
내가 가진 무엇입니까 세 divs 떠났다 왼쪽. 나는 백분율로 패딩을 추가하려고하는데 타겟/컨텍스트 = 결과를 사용하고 * 100 (백분율이기 때문에)입니다.
Ethan Marcotte의 Responsive Web Design 사본에는 " 요소에 유연한 패딩을 설정할 때 컨텍스트는 요소 자체의 너비입니다. " 나는 div에 20 %의 폭을 주었다. 상위 요소는 945 픽셀이므로 각 div의 픽셀 너비는 189 픽셀입니다. 20px의 패딩을 추가하려고 했으므로 20/189 = 0.1058201058201058입니다. 10.58201058201058 %의 각 div에 패딩을 추가했습니다.
이렇게하면 각 div에 20px가 아닌 100px의 패딩이 제공됩니다. 결국 padding은 div 엘리먼트가 아닌 부모 엘리먼트의 너비를 기반으로 계산된다는 것을 깨달았다.
내 솔루션은 내가 하나의 폭과 다른 패딩을 적용 할 수 있도록, 기존의 각 사업부의 주위에 여분의 사업부를 넣어, 그리고 그게 내가이 개 질문이 문제 ..
해결 :
를왜 패딩은 자체 요소가 아닌 상위 요소를 기준으로 계산됩니까?
어떻게 추가 div를 추가하지 않고도이 작업을 수행 할 수 있습니까?
이 게시물에 링크 된 페이지에서 코드를 볼 수 있으며 아래에 코드도 추가되었습니다.
는 김 감사잘못된 :
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WRONG</title>
<style>
#main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; }
#slideshow { background-color:green; }
.threecolumn { float:left; width:20%; padding:10.58201058201058%; background-color:yellow; } /* 20px/189px */
.slide { position:relative; margin:0 1%; background-color:red; }
p { background-color:white; margin:0; padding:0; }
</style>
</head>
<body>
<div id="main">
<div id="slideshow">
<h1>WRONG</h1>
<div class="threecolumn slide">
<p>According to Firebug, this element has 100px padding.</p>
</div>
<div class="threecolumn slide">
<p>According to Firebug, this element has 100px padding.</p>
</div>
<div class="threecolumn slide">
<p>According to Firebug, this element has 100px padding.</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
RIGHT :
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>RIGHT</title>
<style>
#main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; }
#slideshow { background-color:green; }
.threecolumn { float:left; width:20%; margin:0 1%; background-color:yellow; }
.slide { position:relative; padding:10.58201058201058%; background-color:red; } /* 20px/189px */
p { background-color:white; margin:0; padding:0; }
</style>
</head>
<body>
<div id="main">
<div id="slideshow">
<h1>RIGHT</h1>
<div class="threecolumn">
<div class="slide">
<p>According to Firebug, this element has 20px padding.</p>
</div>
</div>
<div class="threecolumn">
<div class="slide">
<p>According to Firebug, this element has 20px padding.</p>
</div>
</div>
<div class="threecolumn">
<div class="slide">
<p>According to Firebug, this element has 20px padding.</p>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
이유? – AlienWebguy