Positionieren von zwei Elementen in einem Elternteil, um die gleiche Höhe zu haben

Question

Ich habe 2 divs, die ich innerhalb der enthaltenen div Position muss sie beide die gleiche Höhe sein, egal, was Inhalt in jeder von ihnen geht, so müssen sie nehmen die Höhe des höchsten und daher die absoluten und oberen unteren auf festgelegt, derzeit der Container div#three kollabiert und verbirgt die beiden Daumen divs Inhalt.

section#three { 
 
    width: 100%; 
 
    max-width: 1050px; 
 
    margin: 0 auto; 
 
    padding: 70px 0px 70px 0px; 
 
    position: relative; 
 
} 
 

 
section#three div.thumb-container { 
 
    width: 40%; 
 
    top: 0; 
 
    bottom: 0; 
 
    position: absolute; 
 
    clear: both; 
 
} 
 

 
section#three div#left-thumb-container { 
 
    left: 5%; 
 
} 
 

 
section#three div#right-thumb-container { 
 
    right: 5%; 
 
}

<section id="three"> 
 
    <div class="thumb-container" id="left-thumb-container"> 
 
     content will be here to expand the divs 
 
    </div> 
 

 
    <div class="thumb-container" id="right-thumb-container"> 
 
     content will be here to expand the divs 
 
    </div> 
 
</section>

Answer 1

werde ich empfehlen Flexbox zu verwenden, um dieses Problem zu lösen. https://codepen.io/imohkay/pen/gpard Sie können Beispiel dort sehen.

#three { 
 
    display: flex; 
 
} 
 

 
.thumb-container { 
 
    background: gray; 
 
    border-left: 1px solid #fff; 
 
    flex: 1 0; 
 
    padding: 30px; 
 
}

<section id="three"> 
 
    <div class="thumb-container" id="left-thumb-container"> 
 
     content will be here to expand the divs 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente beatae nulla earum error reiciendis molestias praesentium, doloribus esse provident harum illum, voluptate vero ratione unde fugit repellendus laboriosam ad officiis.</p> 
 
    </div> 
 

 
    <div class="thumb-container" id="right-thumb-container"> 
 
     content will be here to expand the divs 
 
    </div> 
 
</section>