文本与较小窗口中的div重叠

Question

我有块，里面有盒子。每个方框都有图像和文字。框下方是联系信息的div。 我的CSS是

.blocks {
  display: block;
  margin: 0 auto;
  width: 85%;
  height: 400px; 
}


.box1, .box2, .box3 {

    width: 33.333%;
    height: 100%;
    vertical-align: top;
    display: inline-block;
    zoom: 1;
    text-align: center;

}

.blocks .box1 img,
.blocks .box2 img,
.blocks .box3 img{
    max-width: 100%;
    height auto;
}

h4 {
    color: #00ff00;
}
.p_1 {
    color: #0000ff;
}

.contactrow{
   margin: 0 auto;
   width: 75%;
   height: 150px; 
   background-color: yellow;
   border-radius: 25px;
   text-align: center;
   color: #0000ff; 

}

我的HTML

                

  </div>
  <div class="col-sm-4 col-xs-4 box2 p_1" >
     <!-- image and text -->

  </div>
  <div class="col-sm-4 col-xs-4 box3 p_1">
     <!-- image and text -->

  </div>
</div><!-- blocks -->
<div class="clearfix"> </div>
<div class="contactrow">    
   <p>Please contact MyanmarTourism at</p>
   <p>email: admin@myanmartourism.com</p>
   <p>Phone: +1234567890</p>
   <p>Fax: +987654321</p>
</div>

在正常的窗口，他们很好。

调整框架大小时，框内的文本与下面的文本框重叠。如何修改CSS，使框架缩小时不会重叠？ 感谢

Answer 1

定义您的.blocks { min-height: 400px;}并移除height : 400px;