縮略圖，右側有一些文字？

我有一個這樣的名單：縮略圖，右側有一些文字？

<html> 

    <head> 
     <link type="text/css" rel="stylesheet" href="testli.css"> 
    </head> 

    <body> 
     <ul id='grok'> 
      <li> 
       <img src='na' class='cimg' /> 
       <div class='cinner'> 
        <p>Title, max two lines.</p> 
        <p>Some longish text, max two lines, causes problems when too long.</p> 
       </div> 
       <div style='clear:both'></div> 
      </li> 

      <li> 
       <img src='na' class='cimg' /> 
       <div class='cinner'> 
        <p>Title</p> 
        <p>Some longish text here which may wrap some and cause problems..</p> 
       </div> 
       <div style='clear:both'></div> 
      </li> 

     </ul> 

    </body> 
</html> 


// testli.css 
* { 
    margin:0; 
    padding:0; 
} 

#grok { 
    list-style-type: none; 
    width: 200px; 
} 

#grok li { 
    background-color: lightgreen; 
    margin: 5px; 
    padding: 5px; 
    text-align: left; 
} 

.cimg { 
    width:70px; 
    height:44px; 
    float:left; 
} 

.cinner { 
    float: left; 
    margin: 0px; 
    padding: 0px; 
    margin-left: 10px; 
    font:14px; 
}

當p元素的文本短，佈局的行爲，因爲我想 - 縮略圖，它們好像是兩個單獨的列文應該會出現。我基本上是想重新創建youtube對推薦項目的縮略圖 - 左側是縮略圖，右側是另一列中的一些文本。標題和文本每個都允許兩行文本。

如果文本太長，cinner div會放在縮略圖下方。什麼是正確的方法來迫使它永遠在正確的位置？

感謝

來源

2010-07-29 user246114

它會是不錯的包括一個鏈接到您的網頁，或者一個完整的測試html頁面來插入瀏覽器。 – vol7ron 2010-07-29 03:00:33

確定爲測試添加完整的html/css – user246114 2010-07-29 03:09:24

你可以通過在<li>設置最小高度做出來，然後將圖像絕對定位的標題和描述的左邊：

#grok { 
    list-style-type: none; 
    width: 200px; 
} 

#grok li { 
    position: relative; 
    margin: 5px; 
    padding: 5px; 
    min-height: 44px; 

    /* min-height fix for IE6. Ideally this would be in an IE6 only stylesheet */ 
    height: auto !important; 
    height: 44px; 

    background-color: lightgreen; 
} 

.cimg { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 70px; 
    height: 44px;   
} 

.cinner {  
    padding: 0 0 0 80px; /* Makes room for the image so it doesn't overlap text */ 
    font: 14px; 
}

來源

2010-07-29 02:55:56 Pat

添加max-width到.cinner（如果我沒有記錯的話 - max-width: 110px）。

來源

2010-07-29 02:53:02 kpower

或只是'width' ... – 2010-07-29 02:57:43

縮略圖，右側有一些文字？

回答

相關問題