圖像沒有采取與動態文本的div旁邊的容器的全高

我目前正面臨一個問題，同時試圖使適合全高的圖像旁邊的文本是不固定的股利。圖像沒有采取與動態文本的div旁邊的容器的全高

我已經嘗試在100％沒有運氣的情況下設置最大寬度，最大高度，也沒有背景圖片，仍然找不到解決方案。

這裏是我的標記：

<div class="col-xs-6 containerDivs"> 
    <div class="col-xs-8"> 
     <h2>LOREM IPSUM</h2>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do   
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
     veniam, quis nostrud exercitation ullamco laboris nisi u</p> 
     <a href="#"><i class="moreIcon white spinLeft"></i></a> 
    </div> 
    <div class="col-xs-4"> 
     <img src="img/image-1.jpg"> 
    </div> 
</div>

這裏是我的CSS：

.containerDivs{   
     > div:first-child{ 
      background-color:grey;    
      padding: 20px; 
      h2{ 
       font-family: 'Lounge-Bold', Helvetica, sans-serif; 
       font-size: 30px;              
       letter-spacing: 6px;      
       margin-bottom: 30px; 
      } 
      h2,p{ 
       color: white; 
       text-transform: uppercase; 
      } 
      p{ 
       line-height: 1.8; 
       font-family: 'Lounge', Helvetica, sans-serif; 
       font-size: 16px;       
      } 
     } 
     > div:last-child{   

     } 

    }

下面是它是如何尋找在我的瀏覽器現在：

那麼什麼我缺少的是圖像採取列的全部高度，沒關係，如果p圖像的藝術被裁剪，只要它需要完整的高度。

提前致謝！

來源

2016-06-12 Leo

您可以嘗試使用可能有效的視口高度（'vh'）。但我預計它會扭曲圖像的一些東西。 – since095

您可以使用Flexbox將兩個div放在同一高度。

/* Add it to the parent */ 
.containerDivs{ 
    display: flex; 
}

關於IMG，如果你想讓它充分的高度，我會建議您在DIV上使用的background-image：

.containerDivs>div:last-child{   
    background-image: url("path_to_your_image"); 
    background-size:cover; 
}

這裏是一個工作的jsfiddle：DEMO

來源

2016-06-12 05:07:59

Hey Mathieu！非常感謝您的回答，似乎唯一的方法是使用display：flex，由於跨瀏覽器問題，我避免了這種情況，還有其他方式可以在沒有顯示的情況下完成嗎？現在就試試看，謝謝！ – Leo

還有其他方法，但它們有點複雜。看看 [CSS-Tricks]（https://css-tricks.com/fluid-width-equal-height-columns/）。此外，flexbox可能存在一些跨瀏覽器問題，但主要受支持：[Flexbox支持]（http://caniuse.com/#feat=flexbox） –

已經嘗試過了，它的工作，謝謝！ – Leo

圖像沒有采取與動態文本的div旁邊的容器的全高

回答

相關問題