インラインブロックdivの子要素は、親の兄弟の位置を変更します。

Question

私はいくつかのコンテンツ（別のdiv内）を持つdivをいくつか持っています。私は素敵な行に親のdivを配置したい、私はその子のdivをその親の相対的なものにしたい。

私はJSFiddleを作成しました。現在、divはすべてうまく配置されていますが、最後の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

あなたは、単に目的の結果を得るために、positionプロパティで遊ぶことができます。

ちょうどの位置を追加してください：をあなたに追加してください。 はクラス

.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; 
    }