thumbnail с некоторым текстом вправо?

У меня есть список, как это:thumbnail с некоторым текстом вправо?

<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; 
}

, когда текст в р элементах короток, расположение ведет себя, как я хочу - эскиз, а текст должен появиться, как будто они находятся в два отдельных столбцах. Я в основном ищут воссоздание эскизов, которые вы хотите использовать для рекомендуемых элементов - миниатюра слева, а другой текст находится в другом столбце справа от него. Каждый заголовок и текст допускали две строки текста.

Если текст слишком длинный, то cinner div помещается под миниатюрой. Каков правильный способ заставить его всегда быть направо?

Благодаря

источник

2010-07-29 user246114

было бы неплохо включить ссылку на вашу страницу , или полную тестовую html-страницу для подключения к браузеру. – vol7ron

ok добавил полный html/css для теста – user246114

Вы можете сделать это, установив мин-высоту на <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' ... –

thumbnail с некоторым текстом вправо?

ответ

Смежные вопросы