Question

我有一个这样的清单：

<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将放置在缩略图下方。什么是迫使它始终向右的正确方法？

由于

Answer 1

将max-width添加到.cinner（如果我没记错 - max-width: 110px）。

Answer 2

您可以通过在<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;
}

缩略图右边有一些文字？

2 个答案: