인라인 블록 div의 하위 요소가 부모 형제 위치를 변경합니다.

Question

일부 div (내부 div div)가 몇 개 있습니다. 부모 div를 멋진 선으로 배치하고 자식 div를 부모와의 관계로 설정하겠습니다.

나는 JSFiddle을 만들었습니다. div는 모두 멋지게 배치되지만, 마지막 부분에서 '.btn'div를 제거하면 모든 것이 엉망이됩니다.

, 내가 의미를 알기 위해 JSFiddle에 HTML을 변경하려면

<div id="expand1" class="expand"> 
    <div id="btn1" class="btn">>></div> 
</div> 
<div id="expand2" class="expand"> 
    <div id="btn2" class="btn">>></div> 
</div> 
<div id="expand3" class="expand"></div> 

여기 무슨 일이야? 원하는 결과를 얻으려면 어떻게해야합니까?

Answer 1

당신은 더 나은 레이아웃 수레를 사용해야합니다

.expand{ 
 
    border:1px solid black; 
 
    width:400px; 
 
    height:400px; 
 
    display:inline-block; 
 
    float: left; 
 
} 
 

 
.btn{ 
 
    cursor:pointer; 
 
    position:relative; 
 
    top:150px; 
 
    left: 150px; 
 
    border: 1px solid black; 
 
    width:40px; 
 
    height:40px; 
 
    vertical-align:middle; 
 
    text-align:center; 
 
    line-height:40px; 
 
}

<div id="expand1" class="expand"> 
 
    <div id="btn1" class="btn">>></div> 
 
</div> 
 
<div id="expand2" class="expand"> 
 
    <div id="btn2" class="btn">>></div> 
 
</div> 
 
<div id="expand3" class="expand"></div>

Answer 2

.expand { 
 
    border: 1px solid black; 
 
    width: 400px; 
 
    height: 400px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.btn{ 
 
    margin: -20px 0 0 -20px; 
 
    cursor: pointer; 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    border: 1px solid black; 
 
    width: 40px; 
 
    height: 40px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    line-height: 40px; 
 
}

<div id="expand1" class="expand"> 
 
    <div id="btn1" class="btn">>></div> 
 
</div> 
 
<div id="expand2" class="expand"> 
 
    <div id="btn2" class="btn">>></div> 
 
</div> 
 
<div id="expand3" class="expand"></div>

Answer 3

당신은 단순히 원하는 결과를 얻을 수있는 위치 속성을 재생할 수 있습니다.

단지 위치를 추가하십시오 :. 클래스를

.expand { 
     position:relative; 
     border: 1px solid black; 
     width: 400px; 
     height: 400px; 
     display: inline-block; 
    } 

을 확장하고에 절대에 위치를 업데이트 . btn 클래스

.btn { 
     cursor: pointer; 
     position: absolute; 
     top: 150px; 
     left: 150px; 
     border: 1px solid black; 
     width: 40px; 
     height: 40px; 
     vertical-align: middle; 
     text-align: center; 
     line-height: 40px; 
    }