요소를 한 부모에 대해 상대적으로 가로로 배치하고 다른 부모에 대해 세로로 배치하는 방법은 무엇입니까?

Question

기본적으로 다음과 같은 구조의 요소가있는 웹 페이지에서 작업하고 있습니다. 부모 컨테이너가 있고 하위 컨테이너와 함께 "선"(예제 이미지에서 빨간색으로 표시) 또는 추가 중첩 된 하위 컨테이너 (검은 색 테두리가있는 노란색 상자로 표시)가 각각 포함될 수 있습니다. 각 하위 컨테이너 자체에는 임의의 깊이에 중첩 된 줄 또는 추가 하위 컨테이너가있을 수 있습니다. 물론 하위 컨테이너 내부의 선은 부모 선의 선보다 좁습니다.

각 줄과 관련하여 두 줄의 추가 정보가 있으며 줄의 왼쪽과 오른쪽에 있지만 컨테이너 장치 전체에 표시해야합니다. 이들은 그림의 자주색 및 파란색 상자로 표시됩니다. 문제는 이것들을 배치하는 것입니다. 하위 컨테이너에 중첩되어있는 행과 관계없이 가장 바깥 쪽 컨테이너의 측면에서 일정한 거리를두고 서로 연관되어있는 행이 수직으로 정렬되어 있어야하지만 서로 수평으로 정렬되어야합니다.

나는 가능하면 순수 CSS 솔루션을 찾고 있어요 : 모습 방법 일 다음

이다. 그러나 절대 위치 지정을 사용하면 절대 위치가 상대적인 위치로 가장 바깥 쪽 부모를 사용하고 오른쪽 위치를 얻거나 절대 위치가 상대적인 위치로 선을 가져 와서 세로 위치를 얻을 수 있습니다. 맞지만, 모두는이 아닙니다. 다음에 예를 들어

:

#parent { 
 
    margin-right: 50px; 
 
    margin-left: 50px; 
 
} 
 
.subcontainer, .container { 
 
    padding: 20px 20px 20px 50px; 
 
    min-height: 20px; 
 
    background-color: yellow; 
 
    border: 2px solid black; 
 
    margin-bottom: 10px; 
 
} 
 
.box { 
 
    min-height: 20px; 
 
    background-color: red; 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
} 
 
.righty { 
 
    position: absolute; 
 
    min-height: 14px; 
 
    min-width: 30px; 
 
    right: -64px; 
 
    background-color: blue; 
 
} 
 
.lefty { 
 
    position: absolute; 
 
    min-height: 14px; 
 
    min-width: 30px; 
 
    left: -94px; 
 
    background-color: purple; 
 
}

<div id="parent" class="container"> 
 
    <div class="box"> 
 
     <div class="lefty"></div> 
 
     <div class="righty"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="lefty"></div> 
 
     <div class="righty"></div> 
 
    </div> 
 
    <div class="box"></div> 
 
    <div class="subcontainer"> 
 
     <div class="box"> 
 
      <div class="lefty"></div> 
 
      <div class="righty"></div> 
 
     </div> 
 
     <div class="subcontainer"> 
 
      <div class="box"> 
 
       <div class="lefty"></div> 
 
       <div class="righty"></div> 
 
      </div> 
 
      <div class="box"> 
 
       <div class="lefty"></div> 
 
       <div class="righty"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="subcontainer"> 
 
     <div class="box"> 
 
      <div class="lefty"></div> 
 
      <div class="righty"></div> 
 
     </div> 
 
    </div> 
 
</div>

는 내가 얻을 것이 이것이다 :

그러나 파란색과 보라색 상자 수평 정렬되지 않은 그들이해야하는 것처럼.

자바 스크립트 (여기는 JsFiddle)로 문제를 해결할 수 있지만 내부 컨테이너가 크기 조정 등으로 정기적으로 호출해야하므로 짜증이납니다 (확대/축소시 왜곡되는 경향이 있습니다) . 이 작업을 수행 할 수있는 순수한 CSS 방법이 있다면 훌륭합니다.

감사합니다.

Answer 1

이 좋아, 그래서 기본적으로 여기에 무슨 짓을했는지, 내가 .box에서 position: relative을 제거하고 .righty 및 .lefty이 절대이 상대에 #parent하지 .box 위치입니다 그래서 지금 #parent에 추가 .container 또는 .subcontainer

#parent { 
 
    margin-right: 50px; 
 
    margin-left: 50px; 
 
    position: relative; 
 
} 
 

 
.subcontainer, .container { 
 
    padding: 20px 20px 20px 50px; 
 
    min-height: 20px; 
 
    background-color: yellow; 
 
    border: 2px solid black; 
 
    margin-bottom: 10px; 
 
} 
 
.box { 
 
    min-height: 20px; 
 
    background-color: red; 
 
    margin-bottom: 10px; 
 
    _position: relative; 
 
} 
 
.righty { 
 
    position: absolute; 
 
    min-height: 14px; 
 
    min-width: 30px; 
 
    left: 101%; 
 
    background-color: blue; 
 
} 
 
.lefty { 
 
    position: absolute; 
 
    min-height: 14px; 
 
    min-width: 30px; 
 
    right: 101%; 
 
    background-color: purple; 
 
}

<div id="parent" class="container"> 
 
    <div class="box"> 
 
     <div class="lefty"></div> 
 
     <div class="righty"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="lefty"></div> 
 
     <div class="righty"></div> 
 
    </div> 
 
    <div class="box"></div> 
 
    <div class="subcontainer"> 
 
     <div class="box"> 
 
      <div class="lefty"></div> 
 
      <div class="righty"></div> 
 
     </div> 
 
     <div class="subcontainer"> 
 
      <div class="box"> 
 
       <div class="lefty"></div> 
 
       <div class="righty"></div> 
 
      </div> 
 
      <div class="box"> 
 
       <div class="lefty"></div> 
 
       <div class="righty"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="subcontainer"> 
 
     <div class="box"> 
 
      <div class="lefty"></div> 
 
      <div class="righty"></div> 
 
     </div> 
 
    </div> 
 
</div>