2つのオーバーラップするdivを親の一番下に揃えます。

Question

2つのdivを親の一番下に揃えようとしています。

• ホワイト（class="section"）は親divで100％幅です。
• グレー（class="text"）は幅100％であり、内容に応じてランダムな高さを持つことができます。白とオレンジよりも高さが低くてもよく、その底は白のボトムに合わせる必要があります。
• オレンジ（class="icon"）は幅と高さが固定されていますが、その底面は白の底に揃えられていなければならず、右に引っ張られるべきです（右からずれている場合もあります）オレンジの高さよりも低い。

Iはvertical-align: bottom、position: absolutefloatとの異なる組み合わせを試みたが、無駄に。

JSFiddle：https://jsfiddle.net/ca9we2jo/私はそれが見えるようにしたいどのような

：

Answer 1

あなたは次のようにそれを達成するために、CSS flexを使用することができます。

body { 
 
    background-color: #333333; 
 
    margin: 0; 
 
} 
 
.container { 
 
    margin: 0 auto; 
 
    width: 80%; 
 
} 
 
.section { 
 
    background-color: #FFFFFF; 
 
    min-height: 200px; 
 
    margin-bottom: 100px; 
 
    flex-direction: column-reverse; 
 
    position: relative; 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.text { 
 
    background-color: #999999; 
 
    padding-right: 270px; 
 
    height: 150px; 
 
} 
 
.tall { 
 
    height: 300px; 
 
} 
 
.icon { 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: #FF9933; 
 
    border: #000000 2px dashed; 
 
    z-index: 1; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class="container"> 
 
    <div class="section"> 
 
    <div class="text"> 
 
     <b>Case 1:</b> 
 
     Gray has lower height than orange 
 
    </div> 
 
    <div class="icon"> 
 
    </div> 
 
    </div> 
 
    <div class="section"> 
 
    <div class="text tall"> 
 
     <b>Case 2:</b> 
 
     Gray has bigger height than orange 
 
    </div> 
 
    <div class="icon"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

div .iconの位置を設定するときに、その親divの位置を宣言する必要があります。要素の位置値を設定するときは、位置が宣言されている次の直前の親divを基準にしてその位置を計算します。 .sectionに位置が設定されていない場合、.container（コンテナの位置が設定されている場合）に対する相対位置が計算されます。

<div class="container"> 
    <div class="section"> 
    <div class="text"> 
     <b>Case 1:</b> 
     Gray has lower height than orange 
    </div> 
    <div class="icon"> 
    </div> 
    </div> 
    <div class="section"> 
    <div class="text tall"> 
     <b>Case 2:</b> 
     Gray has bigger height than orange 
    </div> 
    <div class="icon"> 
    </div> 
    </div> 
</div> 



body { 
    background-color: #333333; 
    margin: 0; 
} 
.container { 
    margin: 0 auto; 
    width: 80%; 
} 
.section { 
    position:relative; 
    background-color: #FFFFFF; 
    min-height: 200px; 
    margin-bottom: 200px; 
    width: 100%; 
} 
.text { 
    background-color: #999999; 
    height: 100px; 
    width: 100%; 
    text-align: right; 
    position:absolute; 
    left:0; 
    bottom:0; 
} 
.tall { 
    height: 300px; 
} 
.icon { 
    width: 250px; 
    height: 250px; 
    background-color: #FF9933; 
    border: #000000 2px dashed; 
    z-index: 1; 
    position: absolute; 
    right:0; 
    bottom:0; 
}