div有相同的高度

Question

我有這個代碼

.container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.col { 
 
    width: 50%; 
 
    display: inline-block; 
 
} 
 

 
.col:first-child{ 
 
    float: left; 
 
} 
 

 
.col:last-child{ 
 
    float: right; 
 
} 
 

 
.text { 
 
    background-color: lightblue; 
 
}

<div class="container"> 
 
    <div class="col"> 
 
    <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam placeat amet dolore asperiores et omnis voluptas dolorum natus nobis. Ad, provident exercitationem tempora vel laudantium iure libero possimus voluptates ipsa.</p> 
 
    </div> 
 
    <div class="img"> 
 
     <img src="http://placehold.it/480x150"> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="img"> 
 
     <img src="http://placehold.it/480x50"> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    </div> 
 
    </div> 
 
</div>

而不必聲明的任何高度。我想我的兩個.col有相同的高度。 我也需要關心響應。

我已經嘗試固定高度設置爲我的最後.text格，但它並不能幫助我..

感謝您的幫助！

Answer 1

Flexbox，就可以做到這一點：

.container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
} 
 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.col { 
 
    border: 1px solid grey; 
 
    background:plum; 
 
} 
 
.text { 
 
    background-color: lightblue; 
 
    
 
}

<div class="container"> 
 
    <div class="col"> 
 
    <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam placeat amet dolore asperiores et omnis voluptas dolorum natus nobis. Ad, provident exercitationem tempora vel laudantium iure libero possimus voluptates ipsa.</p> 
 
    </div> 
 
    <div class="img"> 
 
     <img src="http://placehold.it/480x150"> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="img"> 
 
     <img src="http://placehold.it/480x50"> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
    </div> 
 
    </div> 
 
</div>