不需要的內容在圖像下方丟棄

Question

我在圖像旁邊有文字（現在是紅色方塊）。 當我讓窗戶非常小，然後文字在圖像下，我不希望這種情況發生。

那麼好：

不好：

這怎麼可能prevended？

<div class="entrie"> 
       <img class="entrieImage" src="images/img01.png"/> 

       <div class="entrieInfo"> 
        <div class="band">Green</div> 
        <div class="album">...</div> 
        <div class="label">ATCO</div> 
        <div class="year">1966</div> 
        - 
        <div class="tags">rousseau, green, woodsy, band photo, 12IN, tree, civilization, Atco, 1960's, Fuzz 
        </div> 
       </div> 

      </div> 

-

.entrie { 
    float: left; 
    margin-bottom: 40px; 
    position: relative; 
} 

.entrieInfo { 
    width: 200px; 
    float: left; 
    margin-left: 10px; 
    margin-right: -45px; 
    position: relative; 
    z-index: 2; 

} 

.entrieImage { 
    /* if you only set the width then the height will be set automaticly proportional*/ 
    width: 300px; 
    height: 300px; 
    float: left; 
    position: relative; 
    z-index: 1; 
    background: red; 
} 

這裏輕鬆地測試一個js小提琴：

http://jsfiddle.net/K4RFU/

Answer 1

你可以設置一個min-width上.entrie這是大到足以涵蓋的內容。