当父母的身高是动态的时，子div为100％| HTML/CSS

Question

我想要的形象被旁边的文本text.The量为中心将在每个盒子不同，所以我不能设置我研究人们主要使用的两种方式height.As垂直居中。使用线高我不能使用，因为我没有固定的高度。第二个是使用绝对定位，我不能使用，因为左div与图像里面将覆盖文本。如果我设置填充文本，当图像不存在时，它看起来不太好。

我能想到的最好的方法是使用jQuery获取和设置容器高度，然后根据高度设置边距。

<div class="container"> 
     <div class="image_holder"> 
      <img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" /> 
     </div> 

     <p>text</p> 
    </div> 

    <style type="text/css"> 
     .container { 
      width:600px; 
      overflow:hidden; } 
     .image_holder { 
      width:100px; 
      height:100%; 
      float:left; 
      background:#eaf0ff; } 
     p { 
      width:500px; 
      float:left; } 
    </style> 

    <script> 

     $('.container').css('height', $('.container').height()); 

     $('.image_holder').css('margin-top', ($('.container').height() - $('.image_holder img').height())/2); 

    </script> 

有没有办法用纯CSS干净地做到这一点？

Answer 1

我想出的最佳解决方案是将图片绝对放置在盒子内，然后使用javascript删除填充，如果盒子中没有图像。