절대 DIV 블록의 너비 조정

Question

나는 최선의 상황을 설명하려고 노력할 것이다.

정보가 포함 된 DIV 블록 목록을 표시하는 사이트가 있습니다. 3 DIV 블록은 너비를 사용하여 생성됩니다. 33 %

div 블록 안에 이전 div 블록과 완전히 다른 숨겨진 div 블록이 필요합니다.

그래서 나는 이런 식으로 뭔가를 .... 여기

<div class="columnParent"> 
     <div class="columnChild"> 
      "Various stuff here that overlaps parent DIV" 
     </div> 

     "Various text that initially appears, but disappears after clicking a button" 
</div> 

는 CSS입니다 ... 자식 DIV가 보일 때

.columnParent { width:31%; float: left; margin-right:15px; margin-bottom:4%; } 
.columnChild { width:31%; float: left; margin-right:15px; margin-bottom:4%; visibility:hidden; position: absolute; 
background: #FFF;} 

지금 무슨 일이, 그것은 더 큰 것을 끝 부모보다. 이는 가로 : 31 %가 전체 HTML 페이지의 31 %를 차지하고 상위 div는 상위 div의 31 %를 차지하기 때문입니다 (여기에 나열되지 않음).

하위 DIV의 부모와 동일한 너비를 가져올 수있는 방법이 있습니까?

하위 div를 상위 div의 정확한 복제본으로 지정합니다. 안에있는 텍스트를 변경하지만 실제 div는 같은 크기 여야하며 정확히 같은 위치에 있어야합니다.

---

목적 : 부모 항목을 사라지게하고 다른 정보를 가진 새 하위 div를 표시하는 버튼이 있습니다. 자식 div 안에는 div를 다시 사라지게하는 뒤로 버튼이 있습니다 (JS 사용).

도움을 주시면 대단히 감사하겠습니다 !!! 감사!

Answer 1

자식 요소 width: 100%;을 넣으면 부모 요소의 정확한 너비가됩니다. 그런 다음 jQuery를 포함시켜 자식 요소를 fadeIn/fadeOut하고 javascript 코드에서 원하는대로 조작 할 수 있습니다.

Answer 2

너비를 100 %로 지정하고 아래와 같이 columnChild를 기준으로 위치를 지정할 수 있습니다.

.columnChild { 
    width:100%; 
    float: left; 
    margin-right: 15px; 
    margin-bottom: 4%; 
    visibility: hidden; 
    position: relative; 
    background: #FFF; 
} 

참고 : 위치의 상대는 상위 위치로 위치를 조정하고 100 %가 부모 DIV와 같은 폭을하는 데 도움이 될 것 폭하는 데 도움이 될 것입니다.