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

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

那麼好：

enter image description here

不好：

enter image description here

這怎麼可能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/

來源

2012-07-01 clankill3r

當窗口太小時，你想要發生什麼？顯示滾動條？讓圖像更小？隱藏文字？ – Jeroen

我想滾動條 – clankill3r

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

來源

2012-07-01 14:05:04 magicalex

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

回答

相關問題