У меня есть такой список:
<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 для рекомендуемых элементов - миниатюра слева, текст в другом столбце справа от него.Каждому заголовку и тексту разрешено по две строки текста.
Если текст слишком длинный, div cinner помещается под миниатюру.Как правильно заставить его всегда быть правым?
Спасибо