外側のdivの下に2つの内側のdivを表示する方法

Question

私は2つの内側のdivを持つ外側のdivを持っています。 2番目の内部divは、テキスト値を含んでも含まなくてもよい。現在、2つの内側のdivが上部に表示されます。しかし、私はいつも一番下に表示したい。 div要素は以下の通りである：

<div class="outerDiv"> 
    <div class="firstInnerDiv"></div> 
    <div class="secondInnerDiv"></div> 
<div> 

I位置を追加しようとした：;：両方の内側のdiv 0絶対底。両方とも消えます。私はvert-alignを試しました。外側のdivには底がありましたが、効果はありません。

おかげ

Answer 1

それを行うだろう、あなたの外側のdivと内側のdivとあなたの内側のラッパー（.inner）にposition:absolute;にposition:relative;を与えます！

.outerDiv{ 
 
    position:relative; 
 
    width:100px; 
 
    height:200px; 
 
    border:1px solid black; 
 
} 
 
.inner{ 
 
    position:absolute; 
 
    bottom:0; 
 
} 
 
.firstInnerDiv, .secondInnerDiv{ 
 
    width:100px; 
 
    height:auto; 
 
} 
 
.firstInnerDiv{ 
 
    position:relative; 
 
    border:1px solid red; 
 
} 
 
.secondInnerDiv{ 
 
    position:relative; 
 
    border:1px solid green; 
 
}

<div class="outerDiv">Main 
 
    <div class="inner"> 
 
    <div class="firstInnerDiv">Div 1</div> 
 
    <div class="secondInnerDiv">Div 2</div> 
 
    </div> 
 
</div>

Answer 2

絶対配置要素が配置されている最も近い親との関係で配置されます。配置されていない場合は、それらの位置に配置されます。 .outerDivにposition: relative;というCSSを付けて、内側の要素を絶対的に配置すると、探している結果が得られるはずです。あなたはポジショニングhereの詳細を読むことができます。

Answer 3

Parant Divの位置は相対的で、InnerDivに絶対位置を与えるべきです。

.outerDiv{ 
 
    position:relative; 
 
    width:200px; 
 
    height:200px; 
 
    border:1px solid #ff8800; 
 
} 
 
.firstInnerDiv{ 
 
    position: absolute; 
 
    width:100%; 
 
    height:105px; 
 
    border:1px solid red; 
 
    bottom:-110px; 
 
} 
 
.secondInnerDiv{ 
 
    position: absolute; 
 
    width:100%; 
 
    height:105px; 
 
    border:1px solid red; 
 
    bottom:-215px; 
 
    
 
} 
 

 
This Is Example Of Your Requirement Try Once .

<div class="outerDiv">This IS Main Div 
 
    <div class="firstInnerDiv">Inner One</div> 
 
    <div class="secondInnerDiv">Inner Two</div> 
 
<div>