CSS : 동일한 클래스의 부모와 관련하여 하위 항목 맞추기

Question

여기에 기본적인 시나리오가 있습니다. (텍스트를 구체적으로 정렬하기 위해이 작업을 수행하지는 않지만 div는 다른 것들과 함께 사용하므로이 isn 텍스트를 정렬하는 가장 적절한 방법 : D 나는 여기에 더 관심이 있습니다.)

<div id="1" class="mydivclass"> 
    <p>The first div</p> 
    <div id="2" class="mydivclass"> 
    <p>The second div</p> 
    <div id="3" class="mydivclass"> 
     <p>The third div</p> 
    </div> 
    </div> 
</div> 

는 부모의 상대적에, 페이지에 그들에게 자기의 위치를 ​​같은 클래스를 사용하여 내가 자식 사업부 (사업부 내부 사업부)와 DIV 년대 만들 수 CSS를 사용? 그래서 다음과 같이 위에서 내 출력을 싶습니다

는

The first div 
    The second div 
    The third div 

나는 내가 할 수 있는지 알고 싶습니다 그렇다면 방법이 사용 CSS를 달성하기 위해? 예를 들어, 위의 결과를 얻기 위해 다음과 같은 것을 사용하여 부모보다 10 픽셀 더 많은 픽셀을 채울 수 있습니까?

.mydivclass { 
    padding-left: 10px; 
} 

따라서 각 div에 동일한 CSS 클래스를 중첩하면 천천히 수평 정렬이 증가합니다.

Answer 1

position:relative;과 left과 같은 조합을 의미합니까? http://jsfiddle.net/EUTPB/

Answer 2

표현식을 사용하지 않고 IE에서만 지원됩니다. 원하는 것을하기 위해서는 position:relative과 left과 같은 것을 사용해야합니다.

Answer 3

심각하게 질문하나요? 당신이 실제로 그것을 시도한다면 분명히 할 수 있습니다. 다음은 작동중인 코드입니다. https://dl.dropbox.com/u/73603348/nesting.html