缩略图，右侧有一些文字？

我有一个这样的名单：缩略图，右侧有一些文字？

<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

缩略图，右侧有一些文字？

回答

相关问题