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>